android recycler view item放大,RecyclerView+CardView实现item选中放大，圆角，区分在线状态效果...

最近ui给了个需求，要实现一个用户列表，要求和qq类似在线高亮，不在线要灰暗，选中具有放大效果。

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

activity的布局放置一个recyclerView就可以了。主要看看

item布局

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:id="@+id/device"

android:layout_width="54dp"

android:layout_height="54dp"

app:cardCornerRadius="4dp"

app:cardElevation="0dp"

android:layout_marginLeft="11dp"

>

android:id="@+id/iv_pic"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

/>

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: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:id="@+id/flt"

android:layout_marginLeft="11dp"

android:background="@drawable/shape_device_bg"

android:layout_width="54dp"

android:layout_height="54dp"/>

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"

/>

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() {

@Override

public void onItemClick(int position, DeviceBean bean) {

adapter.setSelect(position);

}

});

loadData();

}

private void loadData() {

List 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 {

private int select = 0;

public DeviceAdapter(Context ctx, int itemLayoutId, List 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