安卓当下最流行的吸顶效果的实现（上）

开始逐渐领略到ItemDecoration的美~

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

具体实现步骤如下：

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

第一步：布局里写一个RecyclerView

第二步：实例化

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

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

1. /** 
2.     * 联网请求所需的url 
3.     */   
4.    public String url="http://api.meituan.com/mmdb/movie/v2/list/rt/order/coming.json?ci=1&limit=12&token=&__vhost=api.maoyan.com&utm_campaign=AmovieBmovieCD-1&movieBundleVersion=6801&utm_source=xiaomi&utm_medium=android&utm_term=6.8.0&utm_content=868030022327462&net=255&dModel=MI%205&uuid=0894DE03C76F6045D55977B6D4E32B7F3C6AAB02F9CEA042987B380EC5687C43&lat=40.100673&lng=116.378619&__skck=6a375bce8c66a0dc293860dfa83833ef&__skts=1463704714271&__skua=7e01cf8dd30a179800a7a93979b430b2&__skno=1a0b4a9b-44ec-42fc-b110-ead68bcc2824&__skcy=sXcDKbGi20CGXQPPZvhCU3%2FkzdE%3D"; 
5.  
6. //联网获取数据   
7.        getDataFromNet(); 
8.  
9. /** 
10.      * 使用okhttpUtils进行联网请求数据 
11.      */   
12.     private void getDataFromNet() {   
13.         OkHttpUtils.   
14.                 get()   
15.                 .url(url)   
16.                 .build()   
17.                 .execute(new StringCallback() {   
18.                     @Override   
19.                     public void onError(okhttp3.Call call, Exception e, int id) {   
20.                         Log.e("TAG", "联网失败" + e.getMessage());   
21.                     }   
22.    
23.                     @Override   
24.                     public void onResponse(String response, int id) {   
25.                         Log.e("TAG", "联网成功==" + response);   
26.    
27.                         //联网成功后使用fastjson解析   
28.                         processData(response);   
29.                     }   
30.                 });   
31.     } 
32.  
33. /** 
34.      * 使用fastjson进行解析 
35.      * 
36.      * @param json 
37.      */   
38.     private void processData(String json) {   
39.         //这里使用GsonFormat生成对应的bean类   
40.        JSONObject jsonObject = parseObject(json);   
41.    
42.         String data = jsonObject.getString("data");   
43.         JSONObject dataObj = JSON.parseObject(data);   
44.    
45.         String coming = dataObj.getString("coming");   
46.         List<WaitMVBean.DataBean.ComingBean> comingslist = parseArray(coming, WaitMVBean.DataBean.ComingBean.class);   
47.    
48.         //测试是否解析数据成功   
49. //        String strTest = comingslist.get(0).getCat();   
50. //        Log.e("TAG", strTest + "222");   
51.    
52.          //解析数据成功,设置适配器-->   
53.          
54.         }   
55.    
56.     } 

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

1. //解析数据成功,设置适配器   
2.            MyRecyclerAdapter adapter = new MyRecyclerAdapter( mContext,comingslist);   
3.            recyclerView.setAdapter(adapter);  

适配器：

1. public class MyRecyclerAdapter extends RecyclerView.Adapter {   
2.    
3.     private final List<WaitMVBean.DataBean.ComingBean> comingslist;   
4.     private final Context mContext;   
5.     private final LayoutInflater mLayoutInflater;   
6.    
7.    
8.     public MyRecyclerAdapter(Context mContext, List<WaitMVBean.DataBean.ComingBean> comingslist) {   
9.         this.mContext = mContext;   
10.         this.comingslist = comingslist;   
11.         mLayoutInflater = LayoutInflater.from(mContext);   
12.     }   
13.    
14.     @Override   
15.     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {   
16.         return new MyViewHolder(mLayoutInflater.inflate(R.layout.date_item, null));   
17.     }   
18.    
19.     @Override   
20.     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {   
21.         MyViewHolder myholder = (MyViewHolder) holder;   
22.         myholder.setData(position);   
23.     }   
24.    
25.     @Override   
26.     public int getItemCount() {   
27.         return comingslist.size();   
28.     }   
29.    
30.     class MyViewHolder extends RecyclerView.ViewHolder {   
31.         private TextView mv_name;   
32.         private TextView mv_dec;   
33.         private TextView mv_date;   
34.         private ImageView imageView;   
35.    
36.         public MyViewHolder(View itemView) {   
37.             super(itemView);   
38.             mv_name = (TextView) itemView.findViewById(R.id.mv_name);   
39.             mv_dec = (TextView) itemView.findViewById(R.id.mv_dec);   
40.             mv_date = (TextView) itemView.findViewById(R.id.mv_date);   
41.             imageView = (ImageView) itemView.findViewById(R.id.image);   
42.         }   
43.    
44.         public void setData(int position) {   
45.             WaitMVBean.DataBean.ComingBean coming = comingslist.get(position);   
46.    
47.             String name = coming.getNm();   
48.             mv_name.setText(name);   
49.    
50.             String date = coming.getShowInfo();   
51.             mv_date.setText(date);   
52.    
53.             String dec = coming.getScm();   
54.             mv_dec.setText(dec);   
55.    
56.             //注：当你发下图片无法打开是，做个字符串替换即可   
57.             String imagUrl = coming.getImg();   
58.             String newImagUrl = imagUrl.replaceAll("w.h", "50.80");   
59.    
60.             //使用Glide加载图片   
61.             Glide.with(mContext)   
62.                     .load(newImagUrl)   
63.                     .into(imageView);   
64.         }   
65.     }   
66. }  

item的布局：

1. <?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:layout_width="wrap_content"   
4.     android:layout_height="wrap_content"   
5.     android:background="#ffffff"   
6.     android:gravity="center_vertical"   
7.     android:orientation="horizontal">   
8.    
9.     <ImageView   
10.         android:id="@+id/image"   
11.         android:layout_width="70dp"   
12.         android:layout_height="110dp"   
13.         android:layout_marginBottom="5dp"   
14.         android:layout_marginLeft="10dp"   
15.         android:layout_marginRight="8dp"   
16.         android:layout_marginTop="5dp" />   
17.    
18.     <LinearLayout   
19.         android:layout_width="0dp"   
20.         android:layout_height="wrap_content"   
21.         android:layout_marginLeft="6dp"   
22.         android:layout_weight="1"   
23.         android:orientation="vertical">   
24.    
25.         <TextView   
26.             android:id="@+id/mv_name"   
27.             android:layout_width="wrap_content"   
28.             android:layout_height="wrap_content"   
29.             android:text="神奇動物在哪裏"   
30.             android:textColor="#000000"   
31.             android:textSize="15sp" />   
32.    
33.         <LinearLayout   
34.             android:layout_width="wrap_content"   
35.             android:layout_height="wrap_content"   
36.             android:orientation="horizontal">   
37.    
38.             <TextView   
39.                 android:layout_width="wrap_content"   
40.                 android:layout_height="wrap_content"   
41.                 android:text="观众"   
42.                 android:textColor="#55000000"   
43.                 android:textSize="14sp" />   
44.    
45.             <TextView   
46.                 android:id="@+id/tv_people"   
47.                 android:layout_width="wrap_content"   
48.                 android:layout_height="wrap_content"   
49.                 android:text="9.0 "   
50.                 android:textColor="#FFCE42"   
51.                 android:textSize="18sp" />   
52.    
53.             <TextView   
54.                 android:layout_width="wrap_content"   
55.                 android:layout_height="wrap_content"   
56.                 android:text=" | 专业"   
57.                 android:textColor="#55000000"   
58.                 android:textSize="14sp" />   
59.    
60.             <TextView   
61.                 android:id="@+id/tv_professional"   
62.                 android:layout_width="wrap_content"   
63.                 android:layout_height="wrap_content"   
64.                 android:text="6.7"   
65.                 android:textColor="#FFCE42"   
66.                 android:textSize="18sp" />   
67.         </LinearLayout>   
68.            
69.         <TextView   
70.             android:id="@+id/mv_dec"   
71.             android:layout_width="wrap_content"   
72.             android:layout_height="wrap_content"   
73.             android:layout_marginTop="8dp"   
74.             android:text="神奇動物城，法師顯超能"   
75.             android:textColor="#99000000"   
76.             android:textSize="11sp" />   
77.    
78.         <TextView   
79.             android:id="@+id/mv_date"   
80.             android:layout_width="wrap_content"   
81.             android:layout_height="wrap_content"   
82.             android:layout_marginTop="10dp"   
83.             android:text="今天165家影院放映2088场"   
84.             android:textColor="#99000000"   
85.             android:textSize="11sp" />   
86.     </LinearLayout>   
87.    
88. </LinearLayout>  

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

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

1. GridLayoutManager manager = new GridLayoutManager(this, 1);   
2.             recyclerView.setLayoutManager(manager);  

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

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

接下文

本文作者：佚名

来源：51CTO