在項目概覽時，已經(jīng)提及到客戶端有如下功能：登錄茂洒、注冊孟岛、開始直播、觀看直播督勺、查看直播記錄渠羞、查看本地視頻等。項目的UI如下圖所示智哀，讓我們來逐一解析每個頁面的特點次询。
Live-UI.png
Main主頁面
 live-main.jpg
|
 live-main-menu.jpg
|
|---|
從圖中可以看出，Main主頁面中有三個切圓角的按鈕瓷叫，上下按一定比例進行分割屯吊，而且每個按鈕中間都有一個圖標和文字，同時最上面的按鈕左上角還有一個menu的提示摹菠，表明還有一個抽屜側(cè)滑盒卸。于是就將抽屜布局DrawerLayout作為根布局，然后內(nèi)置Framelayout放置fragment次氨、NavigationView放置抽屜導航蔽介。
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/dl_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/iv_main_menu"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="16dp"
android:clickable="true"
android:focusable="true"
android:src="@drawable/ic_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/drawer_actions" />
</androidx.drawerlayout.widget.DrawerLayout>
MainFragment
然后來看下fragment怎么寫：首先圓角的按鈕，第一個想到的就是就是用CardView卡片控件煮寡，然后再卡片里面放置圖標和文字屉佳，分上下兩層，通過權(quán)重的方式定義高度洲押，保證了不用分辨率的手機能夠保持一致的層次效果武花。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<androidx.cardview.widget.CardView
android:id="@+id/cv_main_video"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/color_navy_blue"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/iv_video"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_video" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_video"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="播放視頻"
android:textColor="@android:color/white"
android:textSize="16sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:id="@+id/cv_main_push"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#4cc154"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/iv_live"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="@mipmap/live" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_live"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="主播"
android:textColor="@android:color/white"
android:textSize="16sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cv_main_play"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@color/weibo_orange"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/iv_play"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="@mipmap/play3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_play"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="觀眾"
android:textColor="@android:color/white"
android:textSize="16sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</LinearLayout>
NavigationView menu菜單
在NavigationView中添加了@menu/drawer_actions這個菜單，該菜單中具有三個iteam杈帐，每個Iteam中都可以添加圖標：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="@+id/navigation_menu_liveInfos"
android:title="查看直播記錄"></item>
</group>
<group>
<item
android:id="@+id/navigation_menu_login"
android:title="登錄"></item>
<item
android:id="@+id/navigation_menu_logout"
android:title="注銷"></item>
</group>
</menu>
NavigationView設(shè)置onNavigationItemSelectedListener就可以設(shè)置給menu的點擊事件体箕，進行頁面跳轉(zhuǎn)、信息查看等操作挑童。
登錄頁面
live-login.jpg
登錄累铅、注冊頁面中以一張極具美感的圖片作為背景，頂部有一個返回按鈕站叼，隨后將登錄娃兽、注冊等內(nèi)容放置在頁面的底部，并將該部分內(nèi)容背景設(shè)置為透明尽楔。
LoginActivity
同樣的使用Activity+fragment的形式進行布局投储。在Activity中第练，使用RelativeLayout作為根布局，放置一個ImageView作為全局背景玛荞，該ImageView的圖片來源來自必應(yīng)每日一圖娇掏。然后通過一個FrameLayout來加載一個具有登錄、注冊等信息的fragment勋眯，最后在FrameLayout的上一層添加頂部的返回按鈕婴梧。
<?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=".login.LoginActivity">
<ImageView
android:id="@+id/iv_login_bing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<FrameLayout
android:id="@+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:fitsSystemWindows="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="21dp"
android:background="@android:color/transparent"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/iv_login_back"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_margin="16dp"
android:clickable="true"
android:focusable="true"
android:src="@drawable/ic_img_back" />
</RelativeLayout>
</RelativeLayout>
細心的朋友應(yīng)該會發(fā)現(xiàn)頁面的頂部狀態(tài)欄背景都成為了每日一圖的一部分，使得整個界面更為美觀客蹋，更為賞心悅目塞蹭。那是怎么實現(xiàn)的呢？
這就需要在Activity中通過代碼來實現(xiàn)：
if (Build.VERSION.SDK_INT >= 21) { //android 5.0以上系統(tǒng)讶坯，狀態(tài)欄也顯示圖片
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
首先獲取Window中的decorView浮还，然后通過該decorView設(shè)置SystemUI的顯示情況，最后將該部分背景設(shè)置為透明闽巩，于是必應(yīng)每日一圖就會顯示到狀態(tài)欄上钧舌。
LoginFragment
這部分包含了賬號的填寫、密碼的填寫涎跨、驗證碼的填寫洼冻、獲取驗證碼按鈕、登錄按鈕隅很、注冊按鈕撞牢、返回登錄按鈕等內(nèi)容，各個部分的展示叔营，需要通過View的visibility屬性來設(shè)置屋彪。
賬號、密碼绒尊、驗證碼的填寫都是通過TextInputLayout和TextInputEditText兩個控件配合使用畜挥，達到提示框自動收縮、內(nèi)容驗證等效果婴谱，是目前比較流程的文本框?qū)崿F(xiàn)方式蟹但。
登錄、注冊按鈕則是通過一張切了彎角的白色背景圖片來實現(xiàn)谭羔。
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="8dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_login_head"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="登錄LIVE华糖，開啟美好一天"
android:textColor="@android:color/white"
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:baselineAligned="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_marginTop="5dp"
android:layout_marginRight="35dp"
android:orientation="horizontal">
<com.google.android.material.textfield.TextInputLayout
android:background="@drawable/login_bg_selector"
android:id="@+id/til_login_account"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:textColorHint="@color/colorAccent"
app:errorTextAppearance="@style/EditTextErrorAppearance">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_login_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="start"
android:hint="手機號"
android:imeOptions="actionGo"
android:inputType="number"
android:maxLength="20"
android:maxLines="1"
android:textColor="@android:color/white" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/bt_login_email_phone"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:background="@drawable/ic_email"
android:tag="email" />
</LinearLayout>
<com.google.android.material.textfield.TextInputLayout
android:background="@drawable/login_bg_selector"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="35dp"
android:layout_marginTop="5dp"
android:layout_marginRight="35dp"
android:textColorHint="@color/colorAccent"
app:errorTextAppearance="@style/EditTextErrorAppearance">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:hint="密碼"
android:inputType="textPassword"
android:maxLength="20"
android:maxLines="1"
android:textColor="@android:color/white" />
</com.google.android.material.textfield.TextInputLayout>
<LinearLayout
android:id="@+id/ll_login_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_marginTop="5dp"
android:layout_marginRight="35dp"
android:orientation="horizontal"
android:visibility="gone">
<com.google.android.material.textfield.TextInputLayout
android:background="@drawable/login_bg_selector"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="3"
android:textColorHint="@color/colorAccent"
app:errorTextAppearance="@style/EditTextErrorAppearance">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_login_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:hint="驗證碼"
android:inputType="textPassword"
android:maxLength="20"
android:maxLines="1"
android:textColor="@android:color/white" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="@+id/bt_login_code"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
android:background="@drawable/button_circle_ripple"
android:gravity="center"
android:text="獲取驗證碼"
android:textColor="@android:color/white"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:layout_marginTop="10dp"
android:layout_marginRight="35dp"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/bt_login_undo"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="8dp"
android:background="@drawable/ic_undo"
android:visibility="gone" />
<Button
android:id="@+id/bt_login_register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:background="@drawable/phone_login_button_bg"
android:text="注冊"
android:textColor="@color/colorPrimary"
android:textSize="16sp" />
<Button
android:id="@+id/bt_login_login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_weight="1"
android:background="@drawable/phone_login_button_bg"
android:text="登錄"
android:textColor="@color/colorPrimary"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
直播頁面
live-living.jpg
直播頁面有三部分組成：
- TextureView：接收相機的回傳圖像
- 返回按鈕和攝像頭切換按鈕
- 自定義直播按鈕。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextureView
android:id="@+id/tv_push_texture"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include layout="@layout/title"/>
<com.ljh.live.ui.ShutterButton
android:id="@+id/btn_push_shutter"
android:layout_marginBottom="16dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_width="75dp"
android:layout_height="75dp" />
</RelativeLayout>
自定義直播按鈕
繼承了Button組件瘟裸，由兩部分構(gòu)成：內(nèi)部圓與外部圓客叉，兩部分圓通過canvas.drawCircle()和不同的狀態(tài)進行不同顏色的繪制。
public class ShutterButton extends Button {
private Paint mPaint;
private int outerRadius;
private int innerRadius;
private int outerCircleColor;
private int innerCircleColor;
private int recordColor;
private RectF rect;
private String TAG = ShutterButton.class.getSimpleName();
private String currentMode = PHOTO_MODE;
public static final String PHOTO_MODE = "photo_mode";
public static final String VIDEO_MODE = "video_mode";
public static final String VIDEO_RECORDING_MODE = "video_record_mode";
public ShutterButton(Context context) {
this(context, null);
}
public ShutterButton(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShutterButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
outerRadius = (int) context.getResources().getDimension(R.dimen.shutter_outer_radius);
outerCircleColor = context.getResources().getColor(R.color.outer_circle_color);
innerCircleColor = context.getResources().getColor(R.color.inner_circle_color);
recordColor = context.getResources().getColor(R.color.color_record);
mPaint = new Paint();
mPaint.setAntiAlias(true);
rect = new RectF();
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
innerRadius = (int) (getWidth() / 2 - 2.5 * outerRadius);
int innerSmallRadius = getWidth() / 10;
rect.left = getWidth() / 2 - innerSmallRadius;
rect.top = getHeight() / 2 - innerSmallRadius;
rect.right = getWidth() / 2 + innerSmallRadius;
rect.bottom = getHeight() / 2 + innerSmallRadius;
}
@Override
protected void onDraw(Canvas canvas) {
switch (currentMode) {
case PHOTO_MODE:
drawOuterCircle(canvas, outerCircleColor);
drawInnerCircle(canvas, innerCircleColor);
break;
case VIDEO_MODE:
drawOuterCircle(canvas, outerCircleColor);
drawInnerCircle(canvas, innerCircleColor);
break;
case VIDEO_RECORDING_MODE:
drawOuterCircle(canvas, innerCircleColor);
drawInnerCircle(canvas, recordColor);
break;
}
}
public void setMode(String mode) {
currentMode = mode;
invalidate();
}
private void drawOuterCircle(Canvas canvas, int color) {
mPaint.setColor(color);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(outerRadius);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2 - outerRadius, mPaint);
}
private void drawInnerCircle(Canvas canvas, int color) {
mPaint.setColor(color);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, innerRadius, mPaint);
}
@Override
public void setEnabled(boolean enabled) {
super.setEnabled(enabled);
if (enabled) {
setAlpha(1.0f);
} else {
setAlpha(0.5f);
}
}
@Override
public void setClickable(boolean clickable) {
super.setClickable(clickable);
if (clickable) {
setAlpha(1.0f);
} else {
setAlpha(0.5f);
}
}
}
查看直播記錄和本地視頻列表頁面
這兩個頁面均是通過RecyclerView和自定義Item來實現(xiàn)。
直播記錄
特點在于通過兩個Spinner下拉框?qū)χ辈?shù)據(jù)進行排列和篩選
本地視頻列表
每個Item中兼搏，都含有一個ImageView來顯示視頻的縮略圖卵慰，而這個縮略圖是通過Glide進行加載，有占位圖片向族、異常圖片，同時取消內(nèi)存緩存棠绘，減少滑動時的內(nèi)存花銷件相。
Glide.with(holder.imageView)
.load(Uri.fromFile(new File(videoInfo.getVideoPath())))
.skipMemoryCache(true)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.placeholder(R.mipmap.error)
.error(R.mipmap.error)
.into(holder.imageView);
播放視頻和觀看直播
使用GSYVideoPlayer控件來實現(xiàn)播放功能。
拓展（持續(xù)更新中）：
- AndroidUI-DrawerLayout+NavigationView
- AndroidUI-CardView
- AndroidUI-TextInputLayout+TextInputEditText
- AndroidUI-Spinner
- AndriodUI-RecyclerView
- 顏色的透明代碼
- AndroidUI-自定義View
