Question

我目前正在努力重写我的一个iOS应用以在Android上发布。我取得了很好的进展，但我正在寻找关于接近列表行的最佳方法的一些指导。

这些是我尝试重新创建的单元格/行：

正如你所看到的，我有一个白色的背景视图，每个边缘和圆角周围有填充，所以我想这个我需要在某种视图中嵌入所有东西？我不确定的另一部分是如何在右边创建彩色圆圈。这是另一种圆角和彩色背景的视图吗？我还没有设法弄清楚如何在我目前拥有的两个textView的右边。所以如果有人能给出一个代码示例，那就太棒了。

这是我目前的XML：

<ImageView
    android:layout_width="78dp"
    android:layout_height="78dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:scaleType="centerCrop"
    android:adjustViewBounds="false"
    android:id="@+id/attractionImageView"
    android:contentDescription="Attraction Image"
    android:background="@color/colorPrimary" />

<ImageView
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="5dp"
    android:background="@drawable/fast_pass"
    android:id="@+id/fastPassImageView" />

<LinearLayout android:orientation="vertical" android:layout_height="match_parent" android:layout_width="fill_parent" android:layout_toEndOf="@+id/attractionImageView" android:layout_toRightOf="@+id/attractionImageView">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="49dp"
        android:id="@+id/attractionNameTextView"
        android:text="Attraction Name"
        android:layout_marginLeft="5dp"/>

    <LinearLayout android:orientation="horizontal" android:layout_height="match_parent" android:layout_width="fill_parent" android:layout_toEndOf="@+id/attractionImageView" android:layout_toRightOf="@+id/attractionImageView">
        <ImageView
            android:layout_width="13dp"
            android:layout_height="13dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:id="@+id/updatedImageView"
            android:background="@drawable/updated"
            android:layout_gravity="center_vertical"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="29dp"
            android:id="@+id/updatedTextView"
            android:text="Updated"
            android:gravity="center_vertical"/>
    </LinearLayout>
</LinearLayout>

这似乎适用于我迄今为止所做的一切，但我不知道从哪里开始。这是它的外观：

有什么建议吗？

Answer 1

对于彩色圆圈 - 我建议只设置一个适当大小的文本视图，并将圆形绘图设置为视图的背景。应该得到你想要的东西。

对于背景 - 我只是将整行放在线性或相对布局中，然后将RoundedBitmapDrawable设置为布局的背景。这将为您提供圆润的背景效果。如有必要，在每个视图的顶部和底部添加一些边距，以增加项目之间的差距。

Answer 2

我认为您为列表视图的项目使用自定义视图，如果是这样，我会将自定义视图的背景设置为以下内容：

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@color/white" />

<stroke android:width="4dp" android:color="@color/beige" /> //If you want a stroke

<corners
    android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
    android:bottomLeftRadius="20dp"
    android:bottomRightRadius="20dp" />

<padding 
    android:left="10dp" 
    android:top="10dp" 
    android:right="10dp"                  
    android:bottom="10dp" />

Answer 3

作为一种替代解决方案，我只是使用了CardViews，并使用Picasso和圆圈的CircleTransformation。

在这个简单的例子中，我使用了CardViews的RecyclerView。

首先，这是Picasso使用的CircleTransformation类：

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;

import com.squareup.picasso.Transformation;

public class CircleTransform implements Transformation {

    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);

        if (squaredBitmap != source) {
            source.recycle();
        }

        Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

        Canvas canvas = new Canvas(bitmap);
        BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG);
        paint.setShader(shader);

        float r = size/2f;
        canvas.drawCircle(r, r, r-1, paint);

        Paint paintBorder = new Paint();
        paintBorder.setStyle(Style.STROKE);
        paintBorder.setColor(Color.argb(84,0,0,0));
        paintBorder.setAntiAlias(true);
        paintBorder.setStrokeWidth(1);
        canvas.drawCircle(r, r, r-1, paintBorder);

        squaredBitmap.recycle();
        return bitmap;
    }

    @Override
    public String key() {
        return "circle";
    }
}

这是碎片：

public class BlankFragment extends Fragment {

    public BlankFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View rootView = inflater.inflate(R.layout.fragment_blank, container, false);

        RecyclerView rv = (RecyclerView) rootView.findViewById(R.id.rv_recycler_view);
        rv.setHasFixedSize(true);
        MyAdapter adapter = new MyAdapter(new String[]{"testone", "testtwo", "testthree", "testfour"}, getActivity());
        rv.setAdapter(adapter);

        LinearLayoutManager llm = new LinearLayoutManager(getActivity());
        rv.setLayoutManager(llm);

        return rootView;
    }

}

fragment_blank.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" 
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
       </android.support.v7.widget.RecyclerView>   
</RelativeLayout>

适配器，包括用于绘制圆和文本的defaultCircleWithText（）方法。这里我只是为圆圈使用一种颜色，但您可以扩展它以为每一行设置正确的圆形颜色：

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private String[] mDataset;
    Context mContext;

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public CardView mCardView;
        public TextView mTextView;
        public ImageView mImageView;


        public MyViewHolder(View v) {
            super(v);

            mCardView = (CardView) v.findViewById(R.id.card_view);
            mTextView = (TextView) v.findViewById(R.id.tv_text);
            mImageView = (ImageView) v.findViewById(R.id.iv_image);
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset, Context context) {
        mDataset = myDataset;
        mContext = context;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.card_item, parent, false);
        // set the view's size, margins, paddings and layout parameters
        MyViewHolder vh = new MyViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.mTextView.setText(mDataset[position]);
        Drawable drawable = new BitmapDrawable(mContext.getResources(), defaultCircleWithText("test"));
        Picasso.with(mContext).load((String)null).fit().transform(new CircleTransform()).placeholder(drawable).into(holder.mImageView);
    }

    @Override
    public int getItemCount() {
        return mDataset.length;
    }

    public final static int BIG_IMAGE = 138;
    public static Bitmap defaultCircleWithText(String text) {

        int size = BIG_IMAGE;
        Bitmap image = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(image);

        int alpha = 165;

        //hard-coded circle color:
        int color = Color.argb(alpha,253,70,45);

        Paint p_circle = new Paint();
        p_circle.setAntiAlias(true);
        p_circle.setColor(color);
        c.drawCircle(size/2f, size/2f, size/2f-1, p_circle);

        Paint p_text = new Paint();
        p_text.setAntiAlias(true);
        p_text.setColor(Color.WHITE);
        p_text.setTextSize(58);

        RectF bounds = new RectF(0, 0, c.getWidth(), c.getHeight());
        // measure text width
        bounds.right = p_text.measureText(text, 0, text.length());
        // measure text height
        bounds.bottom = p_text.descent() - p_text.ascent();

        bounds.left += (c.getWidth() - bounds.right) / 2.0f;
        bounds.top += (c.getHeight() - bounds.bottom) / 2.0f;
        c.drawText(text, bounds.left, bounds.top - p_text.ascent(), p_text);

        return image;
    }
}

card_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="78dp" >

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        card_view:cardCornerRadius="4dp"
        android:layout_width="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

        <TextView 
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="test" >       
            </TextView>


        <ImageView
            android:id="@+id/iv_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" 
            android:layout_marginRight="10dp"/>

      </RelativeLayout>
      </android.support.v7.widget.CardView>


</RelativeLayout>

结果：

带圆角的ListView行

3 个答案: