创新实训博客（12）——App端界面设计（首页Fragment部分）

本地存储token的简单方法

存储方法：使用SharedPreference，存储方式为PRIVATE。

如何把数据存到本地：

[code]                    // token 写入存储
val sharedPreferences = getSharedPreferences("data", Context.MODE_PRIVATE)
val editor: SharedPreferences.Editor = sharedPreferences.edit()
editor.putString("token", token)
editor.apply()
editor.commit()

如何从本地读取数据：

[code]        val sharedPreferences = getSharedPreferences("data", Context.MODE_PRIVATE)
val token = sharedPreferences.getString("token", "noToken").toString()

if (token != "noToken") {
val newIntent = Intent(this, MainActivity::class.java)
newIntent.putExtra("token", token)
startActivity(newIntent)
this.finish()
} else {
val newIntent = Intent(this, LoginActivity::class.java)
startActivity(newIntent)
this.finish()
}

MainActivity布局总体说明

采用Relative布局，顶部是标题栏，底部是选择菜单。中间部分是fragment的切换。

页面（1）——首页

布局说明：

1. 顶部是搜索框，点击后跳转到搜索界面

2. 然后是菜单选项，可以切换博客列表，比如说根据用户活动进行推荐、根据时间进行推荐、根据热度进行推荐等。

标签切换的事件流程：1. 调整标签颜色 2. 向后端发请求 3. 返回给前端数据 4. 使用handle处理事件，显示列表内容

页面（2）——发现

布局说明：

1. 顶部是菜单选项，可以切换博客列表或标签、用户列表。

2. 个人订阅部分是根据个人订阅的标签显示博客列表，标签、博主推荐部分则是显示根据活动记录以及订阅情况推荐的列表。

标签切换的事件流程：1. 调整标签颜色 2. 向后端发请求 3. 返回给前端数据 4. 使用handle处理事件，显示列表内容

页面（3）——我的

布局说明：

1. 上方是个人基本信息，显示用户名和邮件，右侧是个人信息页面跳转按钮，点击后跳转个人信息页面。

2. 然后以数字形式显示阅读量、点赞量以及最近阅读的博客数量。

3. 然后依次以列表的形式显示用户订阅的标签，最近阅读的博客以及最近点赞的博客。

4. 最下方是退出登录的按钮，点击后退出登录。

MainActivity的XML代码

[code]<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity">

<LinearLayout
android:id="@+id/main_top_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="44dp"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@android:color/black"
android:textSize="16sp"
android:textStyle="bold" />

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray" />

</LinearLayout>

<FrameLayout
android:id="@+id/fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/main_tab_bar"
android:layout_below="@id/main_top_bar" />

<LinearLayout
android:id="@+id/main_tab_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:id="@+id/main_tab_1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_weight="1"
android:drawableTop="@drawable/ic_tab_home"
android:drawablePadding="4dp"
android:gravity="center"
android:onClick="changeTabOne"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:text="@string/activity_main_tab_1"
android:textColor="@color/uDark"
android:textSize="12sp" />

<TextView
android:id="@+id/main_tab_2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_weight="1"
android:drawableTop="@drawable/ic_tab_hot"
android:drawablePadding="4dp"
android:gravity="center"
android:onClick="changeTabTwo"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:text="@string/activity_main_tab_2"
android:textColor="@color/uDark"
android:textSize="12sp" />

<TextView
android:id="@+id/main_tab_3"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_weight="1"
android:drawableTop="@drawable/ic_tab_my"
android:drawablePadding="4dp"
android:gravity="center"
android:onClick="changeTabThree"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:text="@string/activity_main_tab_3"
android:textColor="@color/uDark"
android:textSize="12sp" />

</LinearLayout>

</LinearLayout>

</RelativeLayout>