如何将颜色添加到我的 android 卡片视图的顶部，就像在图像中一样？

Question

我写了一个小应用程序，它显示了几个 android 卡片。但是我希望能够像下图一样在卡片顶部设置颜色和标题，到目前为止我还没有在网上找到任何关于如何做到这一点的信息。所以一些帮助会很棒 :-)

（我的代码到目前为止没有完成上述，到目前为止我的代码只是生成常规的全白卡片视图）

到目前为止我的代码如下：

CardAdapter.java

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {

    public List<TTItem> posts = new ArrayList<>();

    public void addItems(List<TTItem> items) {
        posts.addAll(items);
        notifyDataSetChanged();
    }

    public void clear() {
        posts.clear();
        notifyDataSetChanged();
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Context context = parent.getContext();
        View view = View.inflate(context, R.layout.item_cardview, null);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mTextView.setText(posts.get(position).title);
        Picasso.with(holder.mImageView.getContext()).load(posts.get(position).images[0]).into(holder.mImageView);
    }

    @Override
    public int getItemCount() {
        return posts.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mTextView;
        public ImageView mImageView;

        public ViewHolder(View view) {
            super(view);
            mTextView = (TextView) view.findViewById(R.id.textview);
            mImageView = (ImageView) view.findViewById(R.id.imageView);
        }
    }
}

MainActivity.java

public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {
    @InjectView(R.id.mainView)
    RecyclerView mRecyclerView;
    @InjectView(R.id.refreshContainer)
    SwipeRefreshLayout refreshLayout;
    private LinearLayoutManager mLayoutManager;
    private CardAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        mRecyclerView.setHasFixedSize(true);
        refreshLayout.setOnRefreshListener(this);
        TypedValue tv = new TypedValue();
        int actionBarHeight = 0;
        if (getTheme().resolveAttribute(R.attr.actionBarSize, tv, true)) {
            actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
        }
        refreshLayout.setProgressViewEndTarget(true, actionBarHeight);
        mAdapter = new CardAdapter();
        mRecyclerView.setAdapter(mAdapter);
        // use a linear layout manager
        mLayoutManager = new GridLayoutManager(this, 1);
        mRecyclerView.setLayoutManager(mLayoutManager);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        return super.onOptionsItemSelected(item);
    }
    @Override
    public void onRefresh() {
        mAdapter.clear();
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            public void run() {
                refreshLayout.setRefreshing(false);
            }
        }, 2500);
    }
}

Activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">



    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refreshContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/mainView"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.widget.SwipeRefreshLayout>


</LinearLayout>

item_cardview.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:padding="10dp"
    card_view:cardCornerRadius="2dp"
    card_view:contentPadding= "5dp"
    card_view:cardUseCompatPadding="true"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:layout_gravity="center"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

我对你的所做的唯一更改是，card_view:cardCornerRadius="8dp"> 并删除了图像视图（因为不再需要）

卡片未填满一半的屏幕截图：

Answer 1

据我了解，您可以整体更改 CardView 的颜色，但不能更改其中的一部分。我不确定那会如何工作。

您可以做的是在 CardView 中嵌套一个带有标题的 TextView，然后将 TextView 的背景着色为您想要的颜色。使用适当的 margins/padding 以获得统一的外观。为您的 TextView 添加背景，看看您得到了什么。

您的 TextView 已经在您的 android:layout_width="" 上使用 match_parent 参数，因此您只需要像这样添加背景：

<TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_gravity="center"
        android:background="#FF4444"/>

要像我在开头提到的那样更改整个 CardView 颜色，您可以采用相同的方式或以编程方式进行，如下所示：

cardView.setCardBackgroundColor(COLOURHERE);

Answer 2

我相信这（几乎）就是您想要的布局。这是不言自明的，但如果有什么不清楚的地方，请随时询问。

<?xml version="1.0" encoding="utf-8"?>


<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:cardElevation="8dp"
    card_view:cardCornerRadius="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout     <!-- This is the specific part you asked to color -->
            android:id="@+id/heading_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/teal_500"
            android:padding="36dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_heading"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="22 mins to Ancona"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:textSize="36sp" />

            <TextView
                android:id="@+id/tv_subheading"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:layout_below="@+id/tv_heading"
                android:text="Light traffic on ss16"
                android:textColor="@color/teal_200"
                android:textSize="24sp" />

        </LinearLayout>

        <ImageView
            android:id="@+id/iv_map"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="Assigned delivery boy"
            android:scaleType="fitXY"
            android:src="@drawable/bg_map" />

        <TextView
            android:id="@+id/tv_footer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_below="@+id/tv_heading"
            android:text="It is just an example!"
            android:textColor="@color/grey_500"
            android:textStyle="bold"
            android:textSize="24sp" />

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

我已将您的 mapFragment（大概）替换为 imageView 以减少并发症。

更新： 由于问题现在解决了臭名昭著的 "round corner" 问题，这实际上是设计使然。是的，这是一个很大的缺陷。但是解决方案（如文档 Here 中给出的那样）将是使用 card_view:cardPreventCornerOverlap="false" 属性（我认为这没有任何好处，因为它只会再次使卡片变成正方形）。

请参阅这些问题以很好地参考此问题：

Appcompat CardView and Picasso no rounded Corners
Make ImageView fit width of CardView

如何将颜色添加到我的 android 卡片视图的顶部，就像在图像中一样？

How do I add a colour to the top of my android cardviews, like in image?

java

android

android-layout

android-fragments

android-activity