1.添加若干图标；

2.添加RecycleView适配器及子布局；
3.添加颜色工具类；
4.完善基本设备活动类。

app/src/main/AndroidManifest.xml

@@ -18,7 +18,7 @@
         android:supportsRtl="true"
         android:theme="@style/AppTheme"
         tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name=".views.DeviceBasicActivity"></activity>
+        <activity android:name=".views.BasicDeviceActivity"></activity>
         <activity
             android:name=".views.StartActivity"
             android:configChanges="orientation|keyboardHidden|screenSize"

app/src/main/java/cn/minbb/producttester/adapter/BasicDeviceAdapter.java

@@ -0,0 +1,102 @@
+package cn.minbb.producttester.adapter;
+
+import android.content.Context;
+import android.support.v7.widget.RecyclerView;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import java.util.List;
+
+import butterknife.BindView;
+import butterknife.ButterKnife;
+import cn.minbb.producttester.R;
+
+public class BasicDeviceAdapter extends RecyclerView.Adapter<BasicDeviceAdapter.ViewHolder> {
+
+    // 映射数据
+    private Context context;
+    private List<ItemBean> itemBeen;
+
+    private OnItemClickListener onItemClickListener;
+    private OnItemLongClickListener onItemLongClickListener;
+
+    public BasicDeviceAdapter(Context context, List<ItemBean> itemBeen) {
+        this.context = context;
+        this.itemBeen = itemBeen;
+    }
+
+    @Override
+    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+        // 转换一个 View 布局，决定了 item 的样子， 参数：1.上下文 2.Xml 布局资源 3.为 null
+        View view = View.inflate(context, R.layout.item_activity_device_basic, null);
+        // 创建一个 StaggerViewHolder 对象并把 ViewHolder 对象传出去
+        return new ViewHolder(view);
+    }
+
+    @Override
+    public void onBindViewHolder(ViewHolder holder, int position) {
+        holder.keyText.setText(itemBeen.get(position).keyText);
+        holder.valueText.setText(itemBeen.get(position).valueText);
+
+        // 如果设置了回调，则设置点击事件
+        if (onItemClickListener != null) {
+            holder.itemView.setOnClickListener(v -> onItemClickListener.onItemClick(holder.itemView, holder.getLayoutPosition()));
+        }
+
+        if (onItemLongClickListener != null) {
+            holder.itemView.setOnLongClickListener(v -> {
+                onItemLongClickListener.onItemLongClick(holder.itemView, holder.getLayoutPosition());
+                return false;
+            });
+        }
+    }
+
+    @Override
+    public int getItemCount() {
+        return itemBeen.size();
+    }
+
+    // ViewHolder 用于缓存控件
+    class ViewHolder extends RecyclerView.ViewHolder {
+
+        @BindView(R.id.key)
+        TextView keyText;
+        @BindView(R.id.value)
+        TextView valueText;
+
+        ViewHolder(View view) {
+            super(view);
+            ButterKnife.bind(this, view);
+        }
+    }
+
+    public static class ItemBean {
+
+        String keyText;
+        String valueText;
+
+        public ItemBean(String keyText, String valueText) {
+            this.keyText = keyText;
+            this.valueText = valueText;
+        }
+    }
+
+    // 点击事件接口
+    public interface OnItemClickListener {
+        void onItemClick(View view, int position);
+    }
+
+    // 长按事件接口
+    public interface OnItemLongClickListener {
+        void onItemLongClick(View view, int position);
+    }
+
+    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
+        this.onItemClickListener = onItemClickListener;
+    }
+
+    public void setOnItemLongClickListener(OnItemLongClickListener onItemLongClickListener) {
+        this.onItemLongClickListener = onItemLongClickListener;
+    }
+}

app/src/main/java/cn/minbb/producttester/adapter/WaterfallStaggeredAdapter.java

@@ -0,0 +1,109 @@
+package cn.minbb.producttester.adapter;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.support.v7.widget.RecyclerView;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.joanzapata.iconify.widget.IconTextView;
+
+import java.util.List;
+
+import butterknife.BindView;
+import butterknife.ButterKnife;
+import cn.minbb.producttester.R;
+import cn.minbb.producttester.utils.ColorUtil;
+
+public class WaterfallStaggeredAdapter extends RecyclerView.Adapter<WaterfallStaggeredAdapter.ViewHolder> {
+
+    // 映射数据
+    private Context context;
+    private List<ItemBean> itemBeen;
+
+    private OnItemClickListener onItemClickListener;
+    private OnItemLongClickListener onItemLongClickListener;
+
+    public WaterfallStaggeredAdapter(Context context, List<ItemBean> itemBeen) {
+        this.context = context;
+        this.itemBeen = itemBeen;
+    }
+
+    @Override
+    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+        // 转换一个 View 布局，决定了 item 的样子， 参数：1.上下文 2.Xml 布局资源 3.为 null
+        View view = View.inflate(context, R.layout.item_waterfall_staggered, null);
+        // 创建一个 StaggerViewHolder 对象并把 ViewHolder 对象传出去
+        return new ViewHolder(view);
+    }
+
+    @Override
+    public void onBindViewHolder(ViewHolder holder, int position) {
+        holder.itemView.setTag(itemBeen.get(position).id);
+        holder.nameText.setText(itemBeen.get(position).nameText);
+        holder.introductionText.setText(itemBeen.get(position).introductionText);
+        holder.introductionText.setBackgroundColor(Color.parseColor(ColorUtil.getRandomColor(36)));
+
+        // 如果设置了回调，则设置点击事件
+        if (onItemClickListener != null) {
+            holder.itemView.findViewById(R.id.cardView).setOnClickListener(v -> onItemClickListener.onItemClick(holder.itemView, holder.getLayoutPosition()));
+        }
+
+        if (onItemLongClickListener != null) {
+            holder.itemView.findViewById(R.id.cardView).setOnLongClickListener(v -> {
+                onItemLongClickListener.onItemLongClick(holder.itemView, holder.getLayoutPosition());
+                return false;
+            });
+        }
+    }
+
+    @Override
+    public int getItemCount() {
+        return itemBeen.size();
+    }
+
+    // ViewHolder 用于缓存控件
+    class ViewHolder extends RecyclerView.ViewHolder {
+
+        @BindView(R.id.nameText)
+        IconTextView nameText;
+        @BindView(R.id.introductionText)
+        IconTextView introductionText;
+
+        ViewHolder(View view) {
+            super(view);
+            ButterKnife.bind(this, view);
+        }
+    }
+
+    public static class ItemBean {
+
+        String id;
+        String nameText;
+        String introductionText;
+
+        public ItemBean(String id, String nameText, String introductionText) {
+            this.id = id;
+            this.nameText = nameText;
+            this.introductionText = introductionText;
+        }
+    }
+
+    // 点击事件接口
+    public interface OnItemClickListener {
+        void onItemClick(View view, int position);
+    }
+
+    // 长按事件接口
+    public interface OnItemLongClickListener {
+        void onItemLongClick(View view, int position);
+    }
+
+    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
+        this.onItemClickListener = onItemClickListener;
+    }
+
+    public void setOnItemLongClickListener(OnItemLongClickListener onItemLongClickListener) {
+        this.onItemLongClickListener = onItemLongClickListener;
+    }
+}

app/src/main/java/cn/minbb/producttester/utils/ColorUtil.java

@@ -0,0 +1,43 @@
+package cn.minbb.producttester.utils;
+
+import android.graphics.Color;
+
+import java.util.Random;
+
+public class ColorUtil {
+
+    public static String getRandomColor(int alpha) {
+        String red, green, blue;
+        // 生成随机对象
+        Random random = new Random();
+        // 生成红色颜色代码
+        red = Integer.toHexString(random.nextInt(256)).toUpperCase();
+        // 生成绿色颜色代码
+        green = Integer.toHexString(random.nextInt(256)).toUpperCase();
+        // 生成蓝色颜色代码
+        blue = Integer.toHexString(random.nextInt(256)).toUpperCase();
+
+        // 判断红色代码的位数
+        red = red.length() == 1 ? "0" + red : red;
+        // 判断绿色代码的位数
+        green = green.length() == 1 ? "0" + green : green;
+        // 判断蓝色代码的位数
+        blue = blue.length() == 1 ? "0" + blue : blue;
+        // 生成十六进制颜色值
+        return "#" + Integer.toHexString(alpha) + red + green + blue;
+    }
+
+    public static int getRandomColor() {
+        int red, green, blue;
+        // 生成随机对象
+        Random random = new Random();
+        // 生成随机红色颜色代码
+        red = random.nextInt(255);
+        // 生成随机绿色颜色代码
+        green = random.nextInt(255);
+        // 生成随机蓝色颜色代码
+        blue = random.nextInt(255);
+
+        return Color.rgb(red, green, blue);
+    }
+}

app/src/main/java/cn/minbb/producttester/views/DeviceBasicActivity.java → app/src/main/java/cn/minbb/producttester/views/BasicDeviceActivity.java

@@ -11,15 +11,18 @@ import android.os.Message;
 import android.support.v7.app.AlertDialog;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.app.AppCompatDelegate;
+import android.support.v7.widget.LinearLayoutManager;
+import android.support.v7.widget.RecyclerView;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
-import android.widget.TextView;
 import android.widget.Toast;
 
 import com.joanzapata.iconify.widget.IconTextView;
 
 import java.io.UnsupportedEncodingException;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
@@ -27,25 +30,16 @@ import butterknife.BindView;
 import butterknife.ButterKnife;
 import butterknife.OnClick;
 import cn.minbb.producttester.R;
+import cn.minbb.producttester.adapter.BasicDeviceAdapter;
 import cn.minbb.producttester.ctrl.App;
 import cn.minbb.producttester.ctrl.BluetoothChatService;
 
-public class DeviceBasicActivity extends AppCompatActivity {
+public class BasicDeviceActivity extends AppCompatActivity {
 
     @BindView(R.id.noDevice)
     IconTextView noDevice;
-    @BindView(R.id.t1)
-    TextView t1;
-    @BindView(R.id.t2)
-    TextView t2;
-    @BindView(R.id.t3)
-    TextView t3;
-    @BindView(R.id.t4)
-    TextView t4;
-    @BindView(R.id.t5)
-    TextView t5;
-    @BindView(R.id.t6)
-    TextView t6;
+    @BindView(R.id.content)
+    RecyclerView contentRecyclerView;
 
     private ProgressDialog dialog;
 
@@ -59,10 +53,24 @@ public class DeviceBasicActivity extends AppCompatActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
-        setContentView(R.layout.activity_device_basic);
+        setContentView(R.layout.activity_basic_device);
         ButterKnife.bind(this);
 
         App.setupActionBar(this);
+        noDevice.setVisibility(View.VISIBLE);
+        List<BasicDeviceAdapter.ItemBean> itemBeanList = new ArrayList<>();
+        itemBeanList.add(new BasicDeviceAdapter.ItemBean("123", "456"));
+        itemBeanList.add(new BasicDeviceAdapter.ItemBean("321", "654"));
+        itemBeanList.add(new BasicDeviceAdapter.ItemBean("789", "987"));
+        itemBeanList.add(new BasicDeviceAdapter.ItemBean("123", "456"));
+        itemBeanList.add(new BasicDeviceAdapter.ItemBean("321", "654"));
+        itemBeanList.add(new BasicDeviceAdapter.ItemBean("789", "987"));
+        BasicDeviceAdapter basicDeviceAdapter = new BasicDeviceAdapter(this, itemBeanList);
+        contentRecyclerView.setAdapter(basicDeviceAdapter);
+        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
+        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
+        linearLayoutManager.setReverseLayout(false);
+        contentRecyclerView.setLayoutManager(linearLayoutManager);
     }
 
     @Override
@@ -86,12 +94,13 @@ public class DeviceBasicActivity extends AppCompatActivity {
     }
 
     public static void start(Context context) {
-        Intent starter = new Intent(context, DeviceBasicActivity.class);
+        Intent starter = new Intent(context, BasicDeviceActivity.class);
         context.startActivity(starter);
     }
 
     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
+        menu.add(0, 0, 0, "断开连接").setIcon(R.drawable.ic_close_white_24dp).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
         return super.onCreateOptionsMenu(menu);
     }
 
@@ -99,13 +108,36 @@ public class DeviceBasicActivity extends AppCompatActivity {
     public boolean onOptionsItemSelected(MenuItem item) {
         switch (item.getItemId()) {
             case android.R.id.home:
-                AlertDialog.Builder builder = new AlertDialog.Builder(DeviceBasicActivity.this);
-                builder.setTitle("退出")
-                        .setMessage("返回将断开设备的蓝牙连接")
-                        .setNegativeButton("取消", null)
-                        .setPositiveButton("退出", (dialog, which) -> finish())
-                        .create()
-                        .show();
+                if (chatService != null && chatService.getState() == BluetoothChatService.STATE_CONNECTED) {
+                    AlertDialog.Builder builderQuit = new AlertDialog.Builder(BasicDeviceActivity.this);
+                    builderQuit.setTitle("退出")
+                            .setMessage("返回将断开设备的蓝牙连接")
+                            .setNegativeButton("取消", null)
+                            .setPositiveButton("退出", (dialog, which) -> {
+                                chatService.stop();
+                                finish();
+                            })
+                            .create()
+                            .show();
+                } else {
+                    finish();
+                }
+                break;
+            case 0:
+                if (chatService != null && chatService.getState() == BluetoothChatService.STATE_CONNECTED) {
+                    AlertDialog.Builder builderClose = new AlertDialog.Builder(BasicDeviceActivity.this);
+                    builderClose.setTitle("断开连接")
+                            .setMessage("确定断开设备的蓝牙连接吗？")
+                            .setNegativeButton("取消", null)
+                            .setPositiveButton("确定", (dialog, which) -> {
+                                if (null != chatService) chatService.stop();
+                            })
+                            .create()
+                            .show();
+                } else {
+                    Toast.makeText(getApplicationContext(), "设备未连接", Toast.LENGTH_SHORT).show();
+                }
+                break;
             default:
         }
         return super.onOptionsItemSelected(item);
@@ -127,20 +159,22 @@ public class DeviceBasicActivity extends AppCompatActivity {
         }
     }
 
-    @OnClick({R.id.noDevice, R.id.opUp, R.id.opDown, R.id.opLeft, R.id.opRight})
+    @OnClick({R.id.noDevice, R.id.opUp, R.id.opLeft, R.id.opCenter, R.id.opRight, R.id.opDown})
     public void onViewClicked(View view) {
         switch (view.getId()) {
             case R.id.noDevice:
-                startActivityForResult(new Intent(DeviceBasicActivity.this, ScanDeviceActivity.class), 0);
+                startActivityForResult(new Intent(BasicDeviceActivity.this, ScanDeviceActivity.class), 0);
                 break;
             case R.id.opUp:
                 break;
-            case R.id.opDown:
-                break;
             case R.id.opLeft:
                 break;
+            case R.id.opCenter:
+                break;
             case R.id.opRight:
                 break;
+            case R.id.opDown:
+                break;
         }
     }
 
@@ -199,7 +233,7 @@ public class DeviceBasicActivity extends AppCompatActivity {
                     Matcher m = p.matcher(readMessage);
                     // 判断正则表达式是否匹配到
                     if (m.find()) {
-                        System.out.println("->" + m.group());
+                        System.out.println(m.group());
                     } else {
                         System.out.println("未找到");
                     }

app/src/main/java/cn/minbb/producttester/views/MainActivity.java

@@ -14,6 +14,8 @@ import android.support.v4.view.ViewPager;
 import android.support.v7.app.AlertDialog;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.app.AppCompatDelegate;
+import android.support.v7.widget.RecyclerView;
+import android.support.v7.widget.StaggeredGridLayoutManager;
 import android.support.v7.widget.Toolbar;
 import android.view.LayoutInflater;
 import android.view.MenuItem;
@@ -34,9 +36,12 @@ import butterknife.ButterKnife;
 import butterknife.OnClick;
 import cn.minbb.producttester.R;
 import cn.minbb.producttester.adapter.MainPagerAdapter;
+import cn.minbb.producttester.adapter.WaterfallStaggeredAdapter;
 import cn.minbb.producttester.ctrl.BluetoothChatService;
 
-public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
+public class MainActivity extends AppCompatActivity implements
+        BottomNavigationView.OnNavigationItemSelectedListener,
+        WaterfallStaggeredAdapter.OnItemClickListener {
 
     @BindView(R.id.toolbar)
     Toolbar toolbar;
@@ -50,8 +55,8 @@ public class MainActivity extends AppCompatActivity implements BottomNavigationV
     TextView title;
     @BindView(R.id.device)
     TextView device;
-    @BindView(R.id.noDevice)
-    IconTextView noDevice;
+
+    private RecyclerView mainTab_1_recycle;
 
     private List<View> views = new ArrayList<>(3);
     private ProgressDialog dialog;
@@ -105,6 +110,21 @@ public class MainActivity extends AppCompatActivity implements BottomNavigationV
         views.add(page_2);
         views.add(page_3);
         viewPager.setAdapter(new MainPagerAdapter(views));
+
+        mainTab_1_recycle = page_1.findViewById(R.id.mainTab_1_recycle);
+        List<WaterfallStaggeredAdapter.ItemBean> itemBeanList = new ArrayList<>();
+        itemBeanList.add(new WaterfallStaggeredAdapter.ItemBean("1", "基础设备", "适用于通过蓝牙连接的基本STM32控制器"));
+        itemBeanList.add(new WaterfallStaggeredAdapter.ItemBean("2", "321", "654"));
+        itemBeanList.add(new WaterfallStaggeredAdapter.ItemBean("3", "789", "987"));
+        WaterfallStaggeredAdapter waterfallStaggeredAdapter = new WaterfallStaggeredAdapter(this, itemBeanList);
+        waterfallStaggeredAdapter.setOnItemClickListener(this);
+        mainTab_1_recycle.setAdapter(waterfallStaggeredAdapter);
+        // new Stagger 布局管理器，布局管理器所需参数:1.规定显示几列 2.item 排列方向
+        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
+        // 通过布局管理器控制条目排列的顺序  true:反向显示 false:正向显示
+        staggeredGridLayoutManager.setReverseLayout(false);
+        // 设置布局管理器，参数 StaggeredGridLayoutManager，可以是 RecyclerView 实现和 StaggeredGridView 一样的效果
+        mainTab_1_recycle.setLayoutManager(staggeredGridLayoutManager);
     }
 
     private void setListener() {
@@ -158,20 +178,20 @@ public class MainActivity extends AppCompatActivity implements BottomNavigationV
         }
     }
 
-    @OnClick({R.id.device, R.id.noDevice})
+    @Override
+    public void onItemClick(View view, int position) {
+        switch ((String) view.getTag()) {
+            case "1":
+                BasicDeviceActivity.start(this);
+                break;
+            default:
+        }
+    }
+
+    @OnClick({R.id.device})
     public void onViewClicked(View view) {
         switch (view.getId()) {
             case R.id.device:
-                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
-                builder.setTitle("断开连接")
-                        .setMessage("确定断开设备的蓝牙连接吗？")
-                        .setNegativeButton("取消", null)
-                        .setPositiveButton("确定", (dialog, which) -> chatService.stop())
-                        .create()
-                        .show();
-                break;
-            case R.id.noDevice:
-                DeviceBasicActivity.start(this);
                 break;
             default:
         }
@@ -238,7 +258,6 @@ public class MainActivity extends AppCompatActivity implements BottomNavigationV
                         case BluetoothChatService.STATE_CONNECTED:
                             // 已连接
                             showConnectDeviceProgress(false);
-                            noDevice.setVisibility(View.GONE);
                             break;
                         case BluetoothChatService.STATE_CONNECTING:
                             showConnectDeviceProgress(true);
@@ -249,7 +268,6 @@ public class MainActivity extends AppCompatActivity implements BottomNavigationV
                         case BluetoothChatService.STATE_NONE:
                             // 无连接
                             showConnectDeviceProgress(false);
-                            noDevice.setVisibility(View.VISIBLE);
                             break;
                     }
                     break;

app/src/main/res/drawable/ic_arrow_back_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
+</vector>

app/src/main/res/drawable/ic_arrow_downward_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#010101" android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z"/>
+</vector>

app/src/main/res/drawable/ic_arrow_forward_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
+</vector>

app/src/main/res/drawable/ic_arrow_upward_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M4,12l1.41,1.41L11,7.83V20h2V7.83l5.58,5.59L20,12l-8,-8 -8,8z"/>
+</vector>

app/src/main/res/drawable/ic_chevron_left_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>
+</vector>

app/src/main/res/drawable/ic_chevron_right_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M10,6L8.59,7.41 13.17,12l-4.58,4.59L10,18l6,-6z"/>
+</vector>

app/src/main/res/drawable/ic_close_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
+</vector>

app/src/main/res/drawable/ic_crop_square_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M18,4L6,4c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,6c0,-1.1 -0.9,-2 -2,-2zM18,18L6,18L6,6h12v12z"/>
+</vector>

app/src/main/res/drawable/ic_expand_less_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M12,8l-6,6 1.41,1.41L12,10.83l4.59,4.58L18,14z"/>
+</vector>

app/src/main/res/drawable/ic_expand_more_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M16.59,8.59L12,13.17 7.41,8.59 6,10l6,6 6,-6z"/>
+</vector>

app/src/main/res/layout/activity_device_basic.xml → app/src/main/res/layout/activity_basic_device.xml

@@ -1,118 +1,108 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
-    tools:context=".views.DeviceBasicActivity">
+    tools:context=".views.BasicDeviceActivity">
 
-    <LinearLayout
-        android:id="@+id/contentPanel"
+    <android.support.v7.widget.RecyclerView
+        android:id="@+id/content"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <TextView
-            android:id="@+id/t1"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:text="PAGEONE: 0" />
-
-        <TextView
-            android:id="@+id/t2"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:text="TestPageNum: 1" />
-
-        <TextView
-            android:id="@+id/t3"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:text="TestCursorNum: 1" />
-
-        <TextView
-            android:id="@+id/t4"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:text="Angle_P: 23.670000" />
-
-        <TextView
-            android:id="@+id/t5"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:text="Angle_I: -55.799999" />
-
-        <TextView
-            android:id="@+id/t6"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:text="Angle_D: 0.000000" />
-    </LinearLayout>
+        android:layout_marginBottom="8dp"
+        android:padding="16dp"
+        app:layout_constraintBottom_toTopOf="@+id/op"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_bias="0.0" />
 
     <android.support.constraint.ConstraintLayout
         android:id="@+id/op"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
-        android:padding="16dp">
+        android:padding="8dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent">
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/opUp"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="8dp"
+            android:layout_marginStart="16dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginEnd="16dp"
+            android:layout_marginBottom="16dp"
+            android:backgroundTint="@color/colorPrimary"
             app:layout_constraintBottom_toTopOf="@+id/opCenter"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:srcCompat="@drawable/ic_info_outline_white_24dp" />
+            app:layout_constraintTop_toTopOf="parent"
+            app:srcCompat="@drawable/ic_expand_less_white_24dp" />
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/opLeft"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginEnd="8dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginEnd="16dp"
+            android:layout_marginBottom="16dp"
+            android:backgroundTint="@color/colorPrimary"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@+id/opCenter"
+            app:layout_constraintHorizontal_bias="1.0"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/ic_info_outline_white_24dp" />
+            app:srcCompat="@drawable/ic_chevron_left_white_24dp" />
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/opCenter"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:visibility="invisible"
+            android:layout_marginStart="16dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginEnd="16dp"
+            android:layout_marginBottom="16dp"
+            android:backgroundTint="@color/colorPrimary"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/ic_info_outline_white_24dp" />
+            app:srcCompat="@drawable/ic_crop_square_white_24dp" />
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/opRight"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="8dp"
+            android:layout_marginStart="16dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginBottom="16dp"
+            android:backgroundTint="@color/colorPrimary"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toEndOf="@+id/opCenter"
             app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/ic_info_outline_white_24dp" />
+            app:srcCompat="@drawable/ic_chevron_right_white_24dp" />
 
         <android.support.design.widget.FloatingActionButton
             android:id="@+id/opDown"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="8dp"
+            android:layout_marginStart="16dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginEnd="16dp"
+            android:layout_marginBottom="16dp"
+            android:backgroundTint="@color/colorPrimary"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/opCenter"
-            app:srcCompat="@drawable/ic_info_outline_white_24dp" />
+            app:srcCompat="@drawable/ic_expand_more_white_24dp" />
     </android.support.constraint.ConstraintLayout>
 
     <com.joanzapata.iconify.widget.IconTextView
@@ -123,6 +113,11 @@
         android:gravity="center"
         android:text="{fa-hand-pointer-o 64sp}\n\n点击连接设备"
         android:textSize="20sp"
-        android:textStyle="bold" />
+        android:textStyle="bold"
+        android:visibility="invisible"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
-</RelativeLayout>
+</android.support.constraint.ConstraintLayout>

app/src/main/res/layout/activity_main.xml

@@ -38,7 +38,6 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="8dp"
-                android:layout_marginLeft="8dp"
                 android:text="设备"
                 android:textColor="#FFFFFF"
                 android:textSize="18sp"
@@ -51,8 +50,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginEnd="8dp"
-                android:layout_marginRight="8dp"
-                android:text="无连接"
+                android:text=""
                 android:textColor="#FFFFFF"
                 android:textSize="14sp"
                 app:layout_constraintBottom_toBottomOf="parent"
@@ -84,17 +82,4 @@
         app:layout_constraintRight_toRightOf="parent"
         app:menu="@menu/navigation" />
 
-    <com.joanzapata.iconify.widget.IconTextView
-        android:id="@+id/noDevice"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        android:gravity="center"
-        android:text="{fa-hand-pointer-o 64sp}\n\n点击连接设备"
-        android:textSize="20sp"
-        android:textStyle="bold"
-        app:layout_constraintBottom_toTopOf="@+id/navigation"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/viewPager" />
-
 </android.support.constraint.ConstraintLayout>

app/src/main/res/layout/item_activity_device_basic.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:padding="8dp">
+
+    <TextView
+        android:id="@+id/key"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Key"
+        android:textSize="16sp"
+        android:textStyle="bold"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/split"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="4dp"
+        android:text=":"
+        android:textSize="16sp"
+        app:layout_constraintStart_toEndOf="@+id/key"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/value"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
+        android:text="value"
+        android:textSize="16sp"
+        app:layout_constraintStart_toEndOf="@+id/split"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</android.support.constraint.ConstraintLayout>

app/src/main/res/layout/item_waterfall_staggered.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <android.support.v7.widget.CardView
+        android:id="@+id/cardView"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_centerInParent="true"
+        android:clickable="true"
+        android:focusable="true"
+        android:foreground="?android:attr/selectableItemBackground"
+        app:cardBackgroundColor="@android:color/white"
+        app:cardCornerRadius="5dp"
+        app:cardPreventCornerOverlap="true"
+        app:cardUseCompatPadding="true">
+
+        <android.support.constraint.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <com.joanzapata.iconify.widget.IconTextView
+                android:id="@+id/nameText"
+                style="@style/TextAppearance.AppCompat.Title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="48dp"
+                android:layout_marginBottom="4dp"
+                android:text="name"
+                app:layout_constraintBottom_toTopOf="@+id/introductionText"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_bias="1.0"
+                app:layout_goneMarginStart="8dp" />
+
+            <com.joanzapata.iconify.widget.IconTextView
+                android:id="@+id/introductionText"
+                style="@style/TextAppearance.AppCompat.Body1"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:maxLines="4"
+                android:padding="8dp"
+                android:text="introduction"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent" />
+        </android.support.constraint.ConstraintLayout>
+
+    </android.support.v7.widget.CardView>
+
+</RelativeLayout>

app/src/main/res/layout/page_1.xml

@@ -1,7 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/page"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
+    <android.support.v7.widget.RecyclerView
+        android:id="@+id/mainTab_1_recycle"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        android:paddingLeft="8dp"
+        android:paddingTop="8dp"
+        android:paddingRight="8dp"
+        android:paddingBottom="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_bias="0.0" />
+
 </android.support.constraint.ConstraintLayout>