最近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
网友评论