代码：HomePageActivity.zip

一、布局页面的设计

1.因为背景有渐变，所以我在这选择的是帧布局(FrameLayout):

image.png

2.在activity_main.xml中定义渐变色（开始颜色，结束颜色）：

注：帧布局是一套一套放上去覆盖的，所以先把背景放上去，在放渐变色，在放内容
image.png

3.在activity_main.xml布局中把渐变色放入：

image.png

4.分块写，先写最上面那一块（这里我使用的线性布局，设置成水平即可）：

image.png

5.写第二块（这里我使用的是线性布局，水平，图片，线性布局，垂直。布局可以嵌套使用）：

image.png

6.写第三块（用依赖于recyclerview来写，因为这里是需要聚焦，所以需要该方式实现）：

  1. （1）传入依赖包，在grable内添加语句，然后sync。<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1612598395724-568c7ca8-df82-4178-b35e-ec0ae8abd41e.png#align=left&display=inline&height=665&margin=%5Bobject%20Object%5D&name=image.png&originHeight=665&originWidth=956&size=115548&status=done&style=none&width=956)<br />    （2）在activity_main.xml布局里面写入recyclerview：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1612598443272-40a39563-74c7-4653-a1ec-fbee93f4bfff.png#align=left&display=inline&height=142&margin=%5Bobject%20Object%5D&name=image.png&originHeight=142&originWidth=441&size=9971&status=done&style=none&width=441)<br />    （3）在drawable下新建布局translucent.xml，将背景颜色和圆角设置写入：<br />![](https://cdn.nlark.com/yuque/0/2021/png/1574587/1612598678495-e69509df-a667-4353-ac5e-deee704fc55f.png#align=left&display=inline&height=148&margin=%5Bobject%20Object%5D&originHeight=148&originWidth=558&status=done&style=none&width=558)<br />    （4）将剩下的七个复制，修改，写入：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1612599123662-73de1a8e-0169-4d77-8482-646c7058f802.png#align=left&display=inline&height=273&margin=%5Bobject%20Object%5D&name=image.png&originHeight=273&originWidth=636&size=15464&status=done&style=none&width=636)<br />    （5）创建item_recycler_view.xml布局，将背景传入：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1612598944655-a638e260-85b9-49ac-b2d6-9efa648cee5b.png#align=left&display=inline&height=312&margin=%5Bobject%20Object%5D&name=image.png&originHeight=312&originWidth=654&size=27241&status=done&style=none&width=654)<br />    （6）在item_recycler_view.xml布局中将样式添加进去（这里我用px直接设置是不太准确的）：<br />![](https://cdn.nlark.com/yuque/0/2021/png/1574587/1612598591751-45f9c47c-33c4-4940-a624-48fb2ab569da.png#align=left&display=inline&height=307&margin=%5Bobject%20Object%5D&originHeight=307&originWidth=464&status=done&style=none&width=464)

二、java代码的步骤和逻辑思想

1.创建一个RecyclerViewDemo类，继承RecyclerView.Adapter这个适配器：

image.png

2.在RecyclerViewDemo类里面传入MyViewHolder类，继承RecyclerView.ViewHolder，将控件绑定：

image.png

3.将RecyclerViewDemo类里面的方法重写。

image.png

4.将数据传入（这里不建议用这种方法，建议用面向对象的思想写）：

image.png

5.封装得到的item，get和set，然后进行判断：

image.png

6.在MainActivity类中传入变量：

image.png

7.初始化数据：

image.png

8.设置布局样式（这里设置的是GridLayoutManager这个样式）：

image.png

9.将样式、适配器传入：

image.png

10.因为是遥控器监听，所以把遥控器监听的按键加入（这个方法不建议开发使用）：

image.png
image.png
image.png

11.添加方法，写入滚动到的块的位置、和改变。

image.png

三、整体代码：

1.activity_main.xml布局文件代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity"
  8.     android:orientation="vertical"
  9.     android:background="@mipmap/background"
  10.     >
  11.     <ImageView
  12.         android:layout_width="match_parent"
  13.         android:layout_height="200dp"
  14.         android:layout_gravity="bottom"
  15.         android:src="@drawable/test_white_bg"
  16.         />
  17.     <LinearLayout
  18.         android:id="@+id/ll_title"
  19.         android:layout_width="match_parent"
  20.         android:layout_height="wrap_content"
  21.         android:orientation="horizontal"
  22.         android:gravity="center"
  23.         android:layout_marginTop="30dp">
  24.         <TextView
  25.             android:layout_width="wrap_content"
  26.             android:layout_height="wrap_content"
  27.             android:text="2020年12月15日"
  28.             android:textColor="#fbf7be"
  29.             android:textSize="20px"/>
  30.         <TextView
  31.             android:layout_width="wrap_content"
  32.             android:layout_height="wrap_content"
  33.             android:text="星期二"
  34.             android:textColor="#fbf7be"
  35.             android:textSize="20px"
  36.             android:layout_marginLeft="20dp"/>
  37.         <TextView
  38.             android:layout_width="wrap_content"
  39.             android:layout_height="wrap_content"
  40.             android:text="14:32:57"
  41.             android:textColor="#fbf7be"
  42.             android:textSize="20px"
  43.             android:layout_marginLeft="20dp"/>
  44.         <TextView
  45.             android:layout_width="wrap_content"
  46.             android:layout_height="wrap_content"
  47.             android:text="晴天"
  48.             android:textColor="#fbf7be"
  49.             android:textSize="20px"
  50.             android:layout_marginLeft="20dp"/>
  51.         <TextView
  52.             android:layout_width="wrap_content"
  53.             android:layout_height="wrap_content"
  54.             android:text="14°"
  55.             android:textColor="#fbf7be"
  56.             android:textSize="20px"
  57.             android:layout_marginLeft="20dp"/>
  58.     </LinearLayout>
  59.     <LinearLayout
  60.         android:layout_width="match_parent"
  61.         android:layout_height="wrap_content"
  62.         android:orientation="horizontal"
  63.         android:gravity="center"
  64.         android:layout_gravity="center"
  65.         android:layout_marginBottom="80dp">
  66.         <ImageView
  67.             android:layout_width="140px"
  68.             android:layout_height="140px"
  69.             android:src="@mipmap/title"/>
  70.         <LinearLayout
  71.             android:layout_width="wrap_content"
  72.             android:layout_height="wrap_content"
  73.             android:orientation="vertical">
  74.             <TextView
  75.                 android:layout_width="wrap_content"
  76.                 android:layout_height="wrap_content"
  77.                 android:text="光峰智慧党建"
  78.                 android:textSize="54px"
  79.                 android:textColor="#ffffff"/>
  80.             <TextView
  81.                 android:layout_width="wrap_content"
  82.                 android:layout_height="wrap_content"
  83.                 android:textSize="36px"
  84.                 android:textColor="#A6FFFFFF"
  85.                 android:text="不忘初心 牢记使命"/>
  86.         </LinearLayout>
  87.     </LinearLayout>
  88.    <androidx.recyclerview.widget.RecyclerView
  89.        android:id="@+id/rv_demo"
  90.        android:layout_width="wrap_content"
  91.        android:layout_height="wrap_content"
  92.        android:layout_gravity="center"
  93.        android:layout_marginTop="90dp"
  94.        />
  95. </FrameLayout>

2.item_recycler_view.xml布局文件代码：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="263px"
  5.     android:layout_height="180px"
  6.     tools:context=".MainActivity"
  7.     android:orientation="vertical"
  8.     android:gravity="center"
  9.     android:background="@drawable/translucent"
  10.     android:layout_marginTop="15dp"
  11.     android:layout_marginBottom="15dp"
  12.     android:layout_marginLeft="15dp"
  13.     android:layout_marginRight="15dp"
  14.     android:id="@+id/ll_back">
  15. <ImageView
  16.     android:id="@+id/iv_image"
  17.     android:layout_width="70px"
  18.     android:layout_height="70px"
  19.     android:src="@mipmap/text_one"
  20.     />
  21.     <TextView
  22.         android:id="@+id/tv_demo"
  23.         android:layout_width="wrap_content"
  24.         android:layout_height="wrap_content"
  25.         android:text="党建专题"
  26.         android:textColor="#ffffff"
  27.         android:textSize="24px"
  28.         android:layout_marginTop="5dp"
  29.         />
  30.     </LinearLayout>

3.test_white_bg.xml布局文件代码：

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android" 
  2.      android:shape="rectangle">
  3.     <gradient
  4.         android:startColor="#ffffff"
  5.         android:endColor="#00ffffff"
  6.         android:angle="90"
  7.         />
  8. </shape>

4.translucent.xml布局文件代码：

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!-- 背景颜色 -->
  3.     <solid android:color="#f35319" />
  4.     <!-- android:radius 弧形的半径 -->
  5.     <corners android:radius="12px"/>
  6.     <!-- padding：Button里面的文字与Button边界的间隔 -->
  7. </shape>

5.RecyclerViewDemo的java代码：

  1. import android.content.Context;
  2. import android.view.LayoutInflater;
  3. import android.view.View;
  4. import android.view.ViewGroup;
  5. import android.widget.ImageView;
  6. import android.widget.LinearLayout;
  7. import android.widget.TextView;
  8. import androidx.annotation.NonNull;
  9. import androidx.recyclerview.widget.RecyclerView;
  10. import java.util.List;
  11. public class RecyclerViewDemo extends RecyclerView.Adapter<RecyclerViewDemo.MyViewHolder> {
  12.     private Context context;
  13.     private View inflate;
  14.     private int item;
  15. private int[] image={R.mipmap.text_one,R.mipmap.text_two,R.mipmap.text_three,R.mipmap.text_four,
  16.                     R.mipmap.text_five,R.mipmap.text_six,R.mipmap.text_seven,R.mipmap.text_eight};
  17.     private String[] demo={"党建专题","时政要闻","组工状态","两学一做",
  18.                            "三会一课","书记面对面","党务管理","视频会议"};
  19.     private int[] back={R.drawable.translucent,R.drawable.translucent_two,
  20.                         R.drawable.translucent_three,R.drawable.translucent_four,
  21.                         R.drawable.translucent_five,R.drawable.translucent_six,
  22.                         R.drawable.translucent_seven,R.drawable.translucent_eight};
  23.     public int getItem() {
  24.         return item;
  25.     }
  26.     public void setItem(int item) {
  27.         this.item = item;
  28.     }
  29.     public RecyclerViewDemo(Context context, List<String> list){
  30.       this.context=context;
  31.     }
  32.     @NonNull
  33.     @Override
  34.     public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  35.       inflate= LayoutInflater.from(context).inflate(R.layout.item_recycler_view,parent,false);
  36.       MyViewHolder viewHolder=new MyViewHolder(inflate);
  37.       return viewHolder;
  38.     }
  39.     @Override
  40.     public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
  41.               holder.tv_demo.setText(demo[position]);
  42.               holder.iv_image.setImageResource(image[position]);
  43.               holder.ll_back.setBackgroundResource(back[position]);
  44.          if (getItem()==position){
  45.             holder.ll_back.findViewById(R.id.ll_back).setScaleX(1.2f);
  46.             holder.ll_back.findViewById(R.id.ll_back).setScaleY(1.2f);
  47.         }else{
  48.             holder.ll_back.findViewById(R.id.ll_back).setScaleX(1f);
  49.             holder.ll_back.findViewById(R.id.ll_back).setScaleY(1f);
  50.         }
  51.     }
  52.     @Override
  53.     public int getItemCount() {
  54.       return demo.length;
  55.     }
  56.     class MyViewHolder extends RecyclerView.ViewHolder{
  57.          private TextView tv_demo;
  58.          private ImageView iv_image;
  59.          private LinearLayout ll_back;
  60.         public MyViewHolder(@NonNull View itemView) {
  61.             super(itemView);
  62.             tv_demo=itemView.findViewById(R.id.tv_demo);
  63.             iv_image=itemView.findViewById(R.id.iv_image);
  64.             ll_back=itemView.findViewById(R.id.ll_back);
  65.         }
  66.     }
  67. }

6.MainActivity的java代码：

  1. import androidx.appcompat.app.AppCompatActivity;
  2. import androidx.recyclerview.widget.GridLayoutManager;
  3. import androidx.recyclerview.widget.RecyclerView;
  4. import android.content.Context;
  5. import android.content.Intent;
  6. import android.os.Bundle;
  7. import android.util.Log;
  8. import android.view.KeyEvent;
  9. import android.widget.Toast;
  10. import java.util.ArrayList;
  11. import java.util.List;
  12. public class MainActivity extends AppCompatActivity {
  13.     private RecyclerView recyclerView;
  14.     private RecyclerViewDemo recyclerViewDemo;
  15.     private Context context;
  16.     private List<String> list;
  17.     public String TAG="key";
  18.     private int position=0;
  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.activity_main);
  23.         context=this;
  24.         list=new ArrayList<>();
  25.         for (int i=0;i<8;i++){
  26.             list.add(""+i);
  27.         }
  28.         recyclerView=findViewById(R.id.rv_demo);
  29.         recyclerViewDemo=new RecyclerViewDemo(context,list);
  30.         GridLayoutManager manager=new GridLayoutManager(context,4);
  31.         manager.setOrientation(GridLayoutManager.VERTICAL);
  32.         recyclerView.setLayoutManager(manager);
  33.         recyclerView.setAdapter(recyclerViewDemo);
  34.     }
  35.     /**
  36.      * px转sp
  37.      * @param pxVal
  38.      * @return
  39.      */
  40.     public static float px2sp(Context context, float pxVal) {
  41.         return (pxVal / context.getResources().getDisplayMetrics().scaledDensity);
  42.     }
  43.     /**
  44.      * 遥控器按键监听
  45.      *
  46.      * @param keyCode
  47.      * @param event
  48.      * @return
  49.      */
  50.     @Override
  51.     public boolean onKeyDown(int keyCode, KeyEvent event) {
  52.         Intent intent=new Intent();
  53.         switch (keyCode) {
  54.             case KeyEvent.KEYCODE_ENTER:     //确定键enter
  55.             case KeyEvent.KEYCODE_DPAD_CENTER:
  56.                 Log.d(TAG, "enter--->");
  57.                 Toast.makeText(this, "enter--->" + position, Toast.LENGTH_SHORT).show();
  58.                 if (position==0) {
  59.                     intent.setClass(MainActivity.this, TestActivity.class);
  60.                     startActivity(intent);
  61.                 }
  62.                 if (position==1) {
  63.                     intent.setClass(MainActivity.this, TestOneActivity.class);
  64.                     startActivity(intent);
  65.                 }
  66.                 //如果是播放中则暂停、如果是暂停则继续播放
  67.                 //isVideoPlay(videoView.isPlaying(), key);
  68.                 break;
  69.             case KeyEvent.KEYCODE_BACK:    //返回键
  70.                 Toast.makeText(MainActivity.this, "退出该界面", Toast.LENGTH_SHORT).show();
  71.                 finish();
  72.                 Log.d(TAG, "back--->");
  73.                 return true;   //这里由于break会退出，所以我们自己要处理掉 不返回上一层
  74.             case KeyEvent.KEYCODE_SETTINGS: //设置键
  75.                 Log.d(TAG, "setting--->");
  76.                 break;
  77.             case KeyEvent.KEYCODE_DPAD_DOWN:   //向下键
  78.                 /*    实际开发中有时候会触发两次，所以要判断一下按下时触发 ，松开按键时不触发
  79.                  *    exp:KeyEvent.ACTION_UP
  80.                  */
  81.                 if (event.getAction() == KeyEvent.ACTION_DOWN) {
  82.                     Log.d(TAG, "down--->");
  83.                     if (position + 4 <= list.size()-1) {
  84.                         position += 4;
  85.                     }
  86.                     notifyAdapter();
  87.                     Toast.makeText(this, position + "", Toast.LENGTH_SHORT).show();
  88.                 }
  89.                 break;
  90.             case KeyEvent.KEYCODE_DPAD_UP:   //向上键
  91.                 Log.d(TAG, "up--->");
  92.                 if (position - 4 >= 0) {
  93.                     position -= 4;
  94.                 }
  95.                 notifyAdapter();
  96.                 Toast.makeText(this, position + "", Toast.LENGTH_SHORT).show();
  97.                 break;
  98.             case KeyEvent.KEYCODE_0:
  99.                 Log.d(TAG, "0--->");
  100.             case KeyEvent.KEYCODE_DPAD_LEFT: //向左键
  101.                 Log.d(TAG, "left--->");
  102.                 position--;
  103.                 if (position < 0) {
  104.                     position = 0;
  105.                 }
  106.                 notifyAdapter();
  107.                 Toast.makeText(this, position + "", Toast.LENGTH_SHORT).show();
  108.                 break;
  109.             case KeyEvent.KEYCODE_DPAD_RIGHT:  //向右键
  110.                 Log.d(TAG, "right--->");
  111.                 position++;
  112.                 if (position > list.size()-1) {
  113.                     position = list.size()-1;
  114.                 }
  115.                 notifyAdapter();
  116.                 Toast.makeText(this, position + "", Toast.LENGTH_SHORT).show();
  117.                 break;
  118.             case KeyEvent.KEYCODE_INFO:           //info键
  119.                 Log.d(TAG, "info--->");
  120.                 break;
  121.             case KeyEvent.KEYCODE_PAGE_DOWN:            //向上翻页键
  122.             case KeyEvent.KEYCODE_MEDIA_NEXT:
  123.                 Log.d(TAG, "page down--->");
  124.                 break;
  125.             case KeyEvent.KEYCODE_PAGE_UP:            //向下翻页键
  126.             case KeyEvent.KEYCODE_MEDIA_PREVIOUS:
  127.                 Log.d(TAG, "page up--->");
  128.                 break;
  129.             case KeyEvent.KEYCODE_VOLUME_UP:   //调大声音键
  130.                 Log.d(TAG, "voice up--->");
  131.                 break;
  132.             case KeyEvent.KEYCODE_VOLUME_DOWN: //降低声音键
  133.                 Log.d(TAG, "voice down--->");
  134.                 break;
  135.             case KeyEvent.KEYCODE_VOLUME_MUTE: //禁用声音
  136.                 Log.d(TAG, "voice mute--->");
  137.                 break;
  138.             default:
  139.                 break;
  140.         }
  141.         return super.onKeyDown(keyCode, event);
  142.     }
  143.     public void notifyAdapter(){
  144.         recyclerView.scrollToPosition(position);
  145.         recyclerViewDemo.setItem(position);
  146.         recyclerViewDemo.notifyDataSetChanged();
  147.     }
  148. }

7.结果图：

image.png