最近ui給了個需求，要實現(xiàn)一個用戶列表，要求和qq類似在線高亮，不在線要灰暗，選中具有放大效果。
分析：圓角可以采用自定義view，CardView。這里采用后者符合MD風格嘛，CardView不能設置背景，它只提供了一個背景色設置的屬性，因此需要采用View疊加來實現(xiàn)灰暗，選中高亮等狀態(tài)。放大效果我做的時候出現(xiàn)過一些小問題，比如被父控件所限制，RecyclerView位置的限制啊，最后采用clipChildren屬性得到解決，這個屬性默認為true.意思是是否限制子視圖在其范圍內。我們把它設置為false。下面通過詳細代碼來看看如何實現(xiàn)的。
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
