安卓当下最流行的吸顶效果的实现(上)

移动开发 Android
今天让我使用ItemDecoration来完成可推动的悬浮导航栏的效果。

开始逐渐领略到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简单的完成效果如下:

 

 

 

 

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

接下文

责任编辑:庞桂玉 来源: 安卓开发精选
相关推荐

2017-01-13 11:21:39

Android吸顶效果开发

2022-07-28 14:33:32

webviewweb页面

2020-08-19 10:22:45

CIOIT试点项目技术

2023-10-11 08:14:43

iPhoneTabs标签页

2015-05-07 10:10:29

GitHub编程语言

2023-07-31 08:59:46

软件FossilSQLite

2015-05-04 10:05:11

编程语言GitHub流行语言

2016-09-07 14:29:13

GitHub安全SQL

2018-01-31 11:10:21

安卓操作系统手机屏幕

2014-02-04 19:44:23

编程语言开发

2014-02-19 10:34:48

JavaScript代码规范

2011-03-21 13:01:10

2018-09-28 10:23:57

微软 Windows Linux

2024-10-14 10:58:13

2011-01-04 18:04:49

PHP

2014-04-28 10:51:24

GitHubJava库

2021-07-13 06:51:16

H5web开发吸顶

2024-01-11 09:11:08

数据库SQLite管理

2010-07-20 09:49:07

分布式文件系统

2023-03-31 11:21:10

网络协议LoRaWAN
点赞
收藏

51CTO技术栈公众号