The most popular ceiling effect implementation on Android (Part 1)

I began to appreciate the beauty of ItemDecoration~

Today, let me use ItemDecoration to complete the effect of a pushable floating navigation bar. The final effect is as follows:

The specific implementation steps are as follows:

According to the basic use of RecyclerView mentioned in my previous article, let's first complete the basic recyclerView:

Step 1: Write a RecyclerView in the layout

Step 2: Instantiation

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

Step 3: Get the required data (here we come to a more realistic scenario and request data online)

 /**
 * The URL required for the network request
 */
 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=0894D E03C76F6045D55977B6D4E32B7F3C6AAB02F9CEA042987B380EC5687C43&lat=40.1 00673&lng=116.378619&__skck=6a375bce8c66a0dc293860dfa83833ef&__skts=1 463704714271&__skua=7e01cf8dd30a179800a7a93979b430b2&__skno=1a0b4a9b -44ec-42fc-b110-ead68bcc2824&__skcy=sXcDKbGi20CGXQPPZvhCU3%2FkzdE%3D" ; 
 
 //Get data online
 getDataFromNet(); 
 
 /**
 * Use okhttpUtils to request data online
 */
    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" , "Networking failed" + e.getMessage());
 } 
   
 @Override
 public void onResponse(String response, int id) {
 Log.e( "TAG" , "Connection successful==" + response); 
   
 //Use fastjson to parse after successful networking
                        processData(response);
 }
 });
 } 
 
 /**
 * Parsing using fastjson
 *
 * @param json
 */
    private void processData(String json) {
 //Here GsonFormat is used to generate the corresponding bean class
       JSONObject jsonObject = parseObject(json); 
   
        String data = jsonObject.getString( "data" );
        JSONObject dataObj = JSON.parseObject(data); 
   
        String coming = dataObj.getString( "coming" );
        List<WaitMVBean.DataBean.ComingBean> comingslist = parseArray(coming, WaitMVBean.DataBean.ComingBean.class); 
   
 //Test whether the data is parsed successfully
 // String strTest = comingslist.get(0).getCat();
 // Log.e( "TAG" , strTest + "222" ); 
   
 //Parse data successfully, set adapter -->   
         
 } 
   
 }

Step 4: After successfully parsing the data, create and set the adapter and pass the relevant data

 //Parse data successfully, set adapter
           MyRecyclerAdapter adapter = new MyRecyclerAdapter(mContext,comingslist);
           recyclerView.setAdapter(adapter);

adapter:

 public class MyRecyclerAdapter extends RecyclerView.Adapter { 
   
    private final List<WaitMVBean.DataBean.ComingBean> comingslist;
    private final Context mContext;
    private final LayoutInflater mLayoutInflater; 
   
   
 public MyRecyclerAdapter(Context mContext, List<WaitMVBean.DataBean.ComingBean> 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 ); 
   
 //Note: If the image you sent cannot be opened, just replace the string.
            String imagUrl = coming.getImg();
            String newImagUrl = imagUrl.replaceAll( "wh" , "50.80" ); 
   
 //Use Glide to load the image
            Glide. with (mContext)
                    .load (newImagUrl)
                    . into (imageView);
 }
 }
 }

Item layout:

 <?xml version= "1.0" encoding= "utf-8" ?>
 <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"    
    android:layout_width= "wrap_content"    
    android:layout_height= "wrap_content"    
    android:background= "#ffffff"    
    android:gravity= "center_vertical"    
    android:orientation= "horizontal" > 
   
 <ImageView
        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" /> 
   
 <LinearLayout
        android:layout_width= "0dp"    
        android:layout_height= "wrap_content"    
        android:layout_marginLeft= "6dp"    
        android:layout_weight= "1"    
        android:orientation= "vertical" > 
   
 <TextView
            android:id= "@+id/mv_name"    
            android:layout_width= "wrap_content"    
            android:layout_height= "wrap_content"    
 android:text= "Fantastic Beasts and Where to Find Them"    
            android:textColor= "#000000"    
            android:textSize= "15sp" /> 
   
 <LinearLayout
            android:layout_width= "wrap_content"    
            android:layout_height= "wrap_content"    
            android:orientation= "horizontal" > 
   
 <TextView
                android:layout_width= "wrap_content"    
                android:layout_height= "wrap_content"    
 android:text= "audience"    
                android:textColor= "#55000000"    
                android:textSize= "14sp" /> 
   
 <TextView
                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" /> 
   
 <TextView
                android:layout_width= "wrap_content"    
                android:layout_height= "wrap_content"    
 android:text= "|Professional"    
                android:textColor= "#55000000"    
                android:textSize= "14sp" /> 
   
 <TextView
                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" />
 </LinearLayout> 
           
 <TextView
            android:id= "@+id/mv_dec"    
            android:layout_width= "wrap_content"    
            android:layout_height= "wrap_content"    
            android:layout_marginTop= "8dp"    
 android:text= "Fantastic Animal City, the wizard shows his superpowers"    
            android:textColor= "#99000000"    
            android:textSize= "11sp" /> 
   
 <TextView
            android:id= "@+id/mv_date"    
            android:layout_width= "wrap_content"    
            android:layout_height= "wrap_content"    
            android:layout_marginTop= "10dp"    
 android:text= "Today 165 theaters are showing 2088 shows"    
            android:textColor= "#99000000"    
            android:textSize= "11sp" />
 </LinearLayout> 
   
 </LinearLayout>

Step 5: Don’t forget!!!

RecycleView not only needs to set the adapter but also the layout manager, otherwise the picture will not be displayed

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

At this point, the simple completion effect of RecyclerView is as follows:

Let's start making a pushable floating navigation bar:

Continue