android自定义吸顶,Android 实现当下最流行的吸顶效果

开始逐渐领略到ItemDecoration的美~

今天让我 使用 ItemDecoration来完成 可推动的悬浮导航栏的效果，最终实现的效果如下图：

具体实现步骤如下：

根据我前面的文章所讲的RecyclerView的基本使用，我们先来完成基本的recyclerView：

第一步：布局里写一个RecyclerView

第二步：实例化

recyclerView = (RecyclerView) findViewById(R.id.recyclerView);

第三步：获取所需的数据 (这里我们来个真实点的情景，去联网请求数据)

//联网获取数据

getDataFromNet();

/**

* 使用okhttpUtils进行联网请求数据

*/

private void getDataFromNet() {

OkHttpUtils.

get()

.url(url)

.build()

.execute(new StringCallback() {

@Override

public void onError(okhttp3.Call call, Exception e, int id) {

Log.e("TAG", "联网失败" + e.getMessage());

}

@Override

public void onResponse(String response, int id) {

Log.e("TAG", "联网成功==" + response);

//联网成功后使用fastjson解析

processData(response);

}

});

}

/**

* 使用fastjson进行解析

*

* @param json

*/

private void processData(String json) {

//这里使用GsonFormat生成对应的bean类

JSONObject jsonObject = parseObject(json);

String data = jsonObject.getString("data");

JSONObject dataObj = JSON.parseObject(data);

String coming = dataObj.getString("coming");

List comingslist = parseArray(coming, WaitMVBean.DataBean.ComingBean.class);

//测试是否解析数据成功

// String strTest = comingslist.get(0).getCat();

// Log.e("TAG", strTest + "222");

//解析数据成功,设置适配器-->

}

}

第四步：解析数据成功后，创建并设置适配器,并传递相关数据

//解析数据成功,设置适配器

MyRecyclerAdapter adapter = new MyRecyclerAdapter( mContext,comingslist);

recyclerView.setAdapter(adapter);

适配器：

public class MyRecyclerAdapter extends RecyclerView.Adapter {

private final List comingslist;

private final Context mContext;

private final LayoutInflater mLayoutInflater;

public MyRecyclerAdapter(Context mContext, List comingslist) {

this.mContext = mContext;

this.comingslist = comingslist;

mLayoutInflater = LayoutInflater.from(mContext);

}

@Override

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

return new MyViewHolder(mLayoutInflater.inflate(R.layout.date_item, null));

}

@Override

public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

MyViewHolder myholder = (MyViewHolder) holder;

myholder.setData(position);

}

@Override

public int getItemCount() {

return comingslist.size();

}

class MyViewHolder extends RecyclerView.ViewHolder {

private TextView mv_name;

private TextView mv_dec;

private TextView mv_date;

private ImageView imageView;

public MyViewHolder(View itemView) {

super(itemView);

mv_name = (TextView) itemView.findViewById(R.id.mv_name);

mv_dec = (TextView) itemView.findViewById(R.id.mv_dec);

mv_date = (TextView) itemView.findViewById(R.id.mv_date);

imageView = (ImageView) itemView.findViewById(R.id.image);

}

public void setData(int position) {

WaitMVBean.DataBean.ComingBean coming = comingslist.get(position);

String name = coming.getNm();

mv_name.setText(name);

String date = coming.getShowInfo();

mv_date.setText(date);

String dec = coming.getScm();

mv_dec.setText(dec);

//注：当你发下图片无法打开是，做个字符串替换即可

String imagUrl = coming.getImg();

String newImagUrl = imagUrl.replaceAll("w.h", "50.80");

//使用Glide加载图片

Glide.with(mContext)

.load(newImagUrl)

.into(imageView);

}

}

}

item的布局：

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#ffffff"

android:gravity="center_vertical"

android:orientation="horizontal">

android:id="@+id/image"

android:layout_width="70dp"

android:layout_height="110dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="8dp"

android:layout_marginTop="5dp" />

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginLeft="6dp"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/mv_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="神奇動物在哪裏"

android:textColor="#000000"

android:textSize="15sp" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="观众"

android:textColor="#55000000"

android:textSize="14sp" />

android:id="@+id/tv_people"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="9.0 "

android:textColor="#FFCE42"

android:textSize="18sp" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=" | 专业"

android:textColor="#55000000"

android:textSize="14sp" />

android:id="@+id/tv_professional"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="6.7"

android:textColor="#FFCE42"

android:textSize="18sp" />

android:id="@+id/mv_dec"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

android:text="神奇動物城，法師顯超能"

android:textColor="#99000000"

android:textSize="11sp" />

android:id="@+id/mv_date"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="今天165家影院放映2088场"

android:textColor="#99000000"

android:textSize="11sp" />

第五步：一定不能忘！！！

recycleView不仅要设置适配器还要设置布局管理者,否则图片不显示

GridLayoutManager manager = new GridLayoutManager(this, 1);

recyclerView.setLayoutManager(manager);

此时RecyclerView简单的完成效果如下：

下面开始做 可推动的 悬浮导航栏：

第一步：首先我们来写一个类，它起标记的作用，来放每一个item的对应的悬浮栏的字符串

public class NameBean {

String name;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

}

第二步：自定义一个SectionDecoration 类 继承 RecyclerView的ItemDecoration

public class SectionDecoration extends RecyclerView.ItemDecoration {

private static final String TAG = "SectionDecoration";

private List dataList;

private DecorationCallback callback;

private TextPaint textPaint;

private Paint paint;

private int topGap;

private int alignBottom;

private Paint.FontMetrics fontMetrics;

public SectionDecoration(List dataList, Context context, DecorationCallback decorationCallback) {

Resources res = context.getResources();

this.dataList = dataList;

this.callback = decorationCallback;

//设置悬浮栏的画笔---paint

paint = new Paint();

paint.setColor(res.getColor(R.color.colorGray));

//设置悬浮栏中文本的画笔

textPaint = new TextPaint();

textPaint.setAntiAlias(true);

textPaint.setTextSize(DensityUtil.dip2px(context, 14));

textPaint.setColor(Color.DKGRAY);

textPaint.setTextAlign(Paint.Align.LEFT);

fontMetrics = new Paint.FontMetrics();

//决定悬浮栏的高度等

topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);

//决定文本的显示位置等

alignBottom = res.getDimensionPixelSize(R.dimen.sectioned_alignBottom);

}

@Override

public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

super.getItemOffsets(outRect, view, parent, state);

int pos = parent.getChildAdapterPosition(view);

Log.i(TAG, "getItemOffsets：" + pos);

String groupId = callback.getGroupId(pos);

if (groupId.equals("-1")) return;

//只有是同一组的第一个才显示悬浮栏

if (pos == 0 || isFirstInGroup(pos)) {

outRect.top = topGap;

if (dataList.get(pos).getName() == "") {

outRect.top = 0;

}

} else {

outRect.top = 0;

}

}

@Override

public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

super.onDraw(c, parent, state);

int left = parent.getPaddingLeft();

int right = parent.getWidth() - parent.getPaddingRight();

int childCount = parent.getChildCount();

for (int i = 0; i < childCount; i++) {

View view = parent.getChildAt(i);

int position = parent.getChildAdapterPosition(view);

String groupId = callback.getGroupId(position);

if (groupId.equals("-1")) return;

String textLine = callback.getGroupFirstLine(position).toUpperCase();

if (textLine == "") {

float top = view.getTop();

float bottom = view.getTop();

c.drawRect(left, top, right, bottom, paint);

return;

} else {

if (position == 0 || isFirstInGroup(position)) {

float top = view.getTop() - topGap;

float bottom = view.getTop();

//绘制悬浮栏

c.drawRect(left, top - topGap, right, bottom, paint);

//绘制文本

c.drawText(textLine, left, bottom, textPaint);

}

}

}

}

@Override

public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {

super.onDrawOver(c, parent, state);

int itemCount = state.getItemCount();

int childCount = parent.getChildCount();

int left = parent.getPaddingLeft();

int right = parent.getWidth() - parent.getPaddingRight();

float lineHeight = textPaint.getTextSize() + fontMetrics.descent;

String preGroupId = "";

String groupId = "-1";

for (int i = 0; i < childCount; i++) {

View view = parent.getChildAt(i);

int position = parent.getChildAdapterPosition(view);

preGroupId = groupId;

groupId = callback.getGroupId(position);

if (groupId.equals("-1") || groupId.equals(preGroupId)) continue;

String textLine = callback.getGroupFirstLine(position).toUpperCase();

if (TextUtils.isEmpty(textLine)) continue;

int viewBottom = view.getBottom();

float textY = Math.max(topGap, view.getTop());

//下一个和当前不一样移动当前

if (position + 1 < itemCount) {

String nextGroupId = callback.getGroupId(position + 1);

//组内最后一个view进入了header

if (nextGroupId != groupId && viewBottom < textY) {

textY = viewBottom;

}

}

//textY - topGap决定了悬浮栏绘制的高度和位置

c.drawRect(left, textY - topGap, right, textY, paint);

//left+2*alignBottom 决定了文本往左偏移的多少(加-->向左移)

//textY-alignBottom 决定了文本往右偏移的多少 (减-->向上移)

c.drawText(textLine, left + 2 * alignBottom, textY - alignBottom, textPaint);

}

}

/**

* 判断是不是组中的第一个位置

*

* @param pos

* @return

*/

private boolean isFirstInGroup(int pos) {

if (pos == 0) {

return true;

} else {

// 因为是根据 字符串内容的相同与否 来判断是不是同意组的，所以此处的标记id 要是String类型

// 如果你只是做联系人列表，悬浮框里显示的只是一个字母，则标记id直接用 int 类型就行了

String prevGroupId = callback.getGroupId(pos - 1);

String groupId = callback.getGroupId(pos);

//判断前一个字符串 与 当前字符串 是否相同

if (prevGroupId.equals(groupId)) {

return false;

} else {

return true;

}

}

}

//定义一个借口方便外界的调用

interface DecorationCallback {

String getGroupId(int position);

String getGroupFirstLine(int position);

}

}

第三步：在向list集合中先把每一个item的 起“标记”作用的字符串都加进去

setPullAction(comingslist);

private void setPullAction(List comingslist) {

dataList = new ArrayList<>();

for (int i = 0; i < comingslist.size(); i++) {

NameBean nameBean = new NameBean();

String name0 = comingslist.get(i).getComingTitle();

nameBean.setName(name0);

dataList.add(nameBean);

}

}

第四步：在setAdapter() 前，为RecyclerView添加ItemDecoration:

recyclerView.addItemDecoration(new SectionDecoration(dataList,mContext, new SectionDecoration.DecorationCallback() {

//返回标记id (即每一项对应的标志性的字符串)

@Override

public String getGroupId(int position) {

if(dataList.get(position).getName()!=null) {

return dataList.get(position).getName();

}

return "-1";

}

//获取同组中的第一个内容

@Override

public String getGroupFirstLine(int position) {

if(dataList.get(position).getName()!=null) {

return dataList.get(position).getName();

}

return "";

}

}));

这样就完成了~

再看一眼最终效果感受一下：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！