最近ui给了个需求，要实现一个用户列表，要求和qq类似在线高亮，不在线要灰暗，选中具有放大效果。
分析：圆角可以采用自定义view，CardView。这里采用后者符合MD风格嘛，CardView不能设置背景，它只提供了一个背景色设置的属性，因此需要采用View叠加来实现灰暗，选中高亮等状态。放大效果我做的时候出现过一些小问题，比如被父控件所限制，RecyclerView位置的限制啊，最后采用clipChildren属性得到解决，这个属性默认为true.意思是是否限制子视图在其范围内。我们把它设置为false。下面通过详细代码来看看如何实现的。
activity的布局放置一个recyclerView就可以了。主要看看
item布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="14dp"
    android:background="@color/transparent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >


    <android.support.v7.widget.CardView
        android:id="@+id/device"
        android:layout_width="54dp"
        android:layout_height="54dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="0dp"
        android:layout_marginLeft="11dp"
        >

        <ImageView
            android:id="@+id/iv_pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="match_parent"
            android:layout_height="17dp"
            android:gravity="center"
            android:textSize="11sp"
            android:textColor="@drawable/select_device_line_text"
            android:background="@drawable/shape_device_text_bottom_two"
            android:layout_gravity="bottom"
            />


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





    <android.support.v7.widget.CardView
        android:id="@+id/bg"
        android:layout_width="54dp"
        android:layout_height="54dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="0dp"
        android:layout_marginLeft="11dp"
        app:cardBackgroundColor="@color/colorAlphaBlack_66"
        >

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

    <FrameLayout
        android:id="@+id/flt"
        android:layout_marginLeft="11dp"
        android:background="@drawable/shape_device_bg"
        android:layout_width="54dp"
        android:layout_height="54dp"/>

    <TextView
        android:id="@+id/tv_online"
        android:layout_width="23dp"
        android:layout_height="11dp"
        android:textColor="@color/white"
        android:textSize="@dimen/font_8"
        android:gravity="center"
        android:background="@drawable/device_line_text_bg"
        />

    
    

</RelativeLayout>

activity

package com.example.administrator.cardviewsample;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Gallery;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerview;
    private DeviceAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerview.setLayoutManager(new LinearLayoutManager(this));
        adapter = new DeviceAdapter(this, R.layout.item_device_list, null);

        recyclerview.setAdapter(adapter);
        adapter.setOnItemClickListener(new BaseRecyclerAdapter.OnItemClickListener<DeviceBean>() {

            @Override
            public void onItemClick(int position, DeviceBean bean) {
                adapter.setSelect(position);
            }
        });
        loadData();
    }

    private void loadData() {
        List<DeviceBean> list = new ArrayList<>();
        DeviceBean bean1 = new DeviceBean();
        DeviceBean bean2 = new DeviceBean();
        DeviceBean bean3 = new DeviceBean();
        DeviceBean bean4 = new DeviceBean();
        bean1.setName("mm1");
        bean1.setUrl("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2544269114,2104066965&fm=27&gp=0.jpg");
        bean1.setOnline(0);

        bean2.setName("mm2");
        bean2.setUrl("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2154583913,2180497297&fm=11&gp=0.jpg");
        bean2.setOnline(1);

        bean3.setName("mm3");
        bean3.setUrl("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=865490461,298614916&fm=27&gp=0.jpg");
        bean3.setOnline(1);

        bean4.setName("mm4");
        bean4.setUrl("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1676269015,3270704575&fm=27&gp=0.jpg");
        bean4.setOnline(0);
        list.add(bean1);
        list.add(bean2);
        list.add(bean3);
        list.add(bean4);
        adapter.refresh(list);
    }

    class DeviceAdapter extends BaseRecyclerAdapter<DeviceBean> {

        private int select = 0;

        public DeviceAdapter(Context ctx, int itemLayoutId, List<DeviceBean> list) {
            super(ctx, itemLayoutId, list);
        }

        public void setSelect(int select) {
            this.select = select;
            notifyDataSetChanged();
        }

        @Override
        protected void convert(BaseViewHolder holder, int p, DeviceBean deviceBean) {
            if (p == select) {
                holder.getView(R.id.iv_pic).setSelected(true);
                holder.getView(R.id.tv_name).setSelected(true);
                holder.getView(R.id.item).setScaleY(1.2f);
                holder.getView(R.id.item).setScaleX(1.2f);
                holder.getView(R.id.flt).setVisibility(View.VISIBLE);
            }else {
                holder.getView(R.id.iv_pic).setSelected(false);
                holder.getView(R.id.tv_name).setSelected(false);
                holder.getView(R.id.item).setScaleY(1.0f);
                holder.getView(R.id.item).setScaleX(1.0f);
                holder.getView(R.id.flt).setVisibility(View.GONE);
            }
            holder.setText(R.id.tv_name, deviceBean.getName())
                    .setImageUrl(MainActivity.this, deviceBean.getUrl(), R.id.iv_pic)
                    .setText(R.id.tv_online, (deviceBean.getOnline() == 1 ? "在线" : "离线"));
            if (deviceBean.getOnline() == 1) {
                holder.getView(R.id.tv_online).setSelected(true);
                holder.getView(R.id.bg).setVisibility(View.GONE);
            }else {
                holder.getView(R.id.tv_online).setSelected(false);
                holder.getView(R.id.bg).setVisibility(View.VISIBLE);
            }
        }


    }
}

最后附上效果图：

image.png