美文网首页
Live-client-1-UI界面的设计

Live-client-1-UI界面的设计

作者: G63HH | 来源:发表于2019-08-04 16:51 被阅读0次

在项目概览时,已经提及到客户端有如下功能:登录、注册、开始直播、观看直播、查看直播记录、查看本地视频等。项目的UI如下图所示,让我们来逐一解析每个页面的特点。


Live-UI.png

Main主页面

live-main.jpg live-main-menu.jpg

从图中可以看出,Main主页面中有三个切圆角的按钮,上下按一定比例进行分割,而且每个按钮中间都有一个图标和文字,同时最上面的按钮左上角还有一个menu的提示,表明还有一个抽屉侧滑。于是就将抽屉布局DrawerLayout作为根布局,然后内置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卡片控件,然后再卡片里面放置图标和文字,分上下两层,通过权重的方式定义高度,保证了不用分辨率的手机能够保持一致的层次效果。

<?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设置onNavigationItemSelectedListener就可以设置给menu的点击事件,进行页面跳转、信息查看等操作。

登录页面

live-login.jpg

登录、注册页面中以一张极具美感的图片作为背景,顶部有一个返回按钮,随后将登录、注册等内容放置在页面的底部,并将该部分内容背景设置为透明。

LoginActivity

同样的使用Activity+fragment的形式进行布局。在Activity中,使用RelativeLayout作为根布局,放置一个ImageView作为全局背景,该ImageView的图片来源来自必应每日一图。然后通过一个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>

细心的朋友应该会发现页面的顶部状态栏背景都成为了每日一图的一部分,使得整个界面更为美观,更为赏心悦目。那是怎么实现的呢?
这就需要在Activity中通过代码来实现:

if (Build.VERSION.SDK_INT >= 21) { //android 5.0以上系统,状态栏也显示图片
            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设置SystemUI的显示情况,最后将该部分背景设置为透明,于是必应每日一图就会显示到状态栏上。

LoginFragment

这部分包含了账号的填写、密码的填写、验证码的填写、获取验证码按钮、登录按钮、注册按钮、返回登录按钮等内容,各个部分的展示,需要通过View的visibility属性来设置。
账号、密码、验证码的填写都是通过TextInputLayout和TextInputEditText两个控件配合使用,达到提示框自动收缩、内容验证等效果,是目前比较流程的文本框实现方式。
登录、注册按钮则是通过一张切了弯角的白色背景图片来实现。

<?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

直播页面有三部分组成:

  1. TextureView:接收相机的回传图像
  2. 返回按钮和摄像头切换按钮
  3. 自定义直播按钮。
<?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组件,由两部分构成:内部圆与外部圆,两部分圆通过canvas.drawCircle()和不同的状态进行不同颜色的绘制。

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来实现。

直播记录

特点在于通过两个Spinner下拉框对直播数据进行排列和筛选

本地视频列表

每个Item中,都含有一个ImageView来显示视频的缩略图,而这个缩略图是通过Glide进行加载,有占位图片、异常图片,同时取消内存缓存,减少滑动时的内存花销。

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控件来实现播放功能。

拓展(持续更新中):

  1. AndroidUI-DrawerLayout+NavigationView
  2. AndroidUI-CardView
  3. AndroidUI-TextInputLayout+TextInputEditText
  4. AndroidUI-Spinner
  5. AndriodUI-RecyclerView
  6. 颜色的透明代码
  7. AndroidUI-自定义View

相关文章

  • Live-client-1-UI界面的设计

    在项目概览时,已经提及到客户端有如下功能:登录、注册、开始直播、观看直播、查看直播记录、查看本地视频等。项目的UI...

  • 如何把握登陆界面易用与安全的平衡

    不论是网页设计师还是UI设计师,登陆和注册页面的设计是必然经历过的工作内容。登陆界面的设计说难不难,说容易也不是那...

  • Little Big Details|如果你是微信的第一个设计师

    MVD,最小可实现设计 找到了微信1.0界面的截图,大家觉得这是好设计吗?或许刚入门的UE和UI设计师都能找到不少...

  • 哎?这原来是本可爱的教科书哇

    一、写在前面的话 Robin Williams是一位世界级的设计大师,她的这本《写给大家看的设计书》,将复杂的设计...

  • 2018-10-14

    智能社区商超管理系统登陆界面设计文档 1. 登陆界面的效果图 2. 登陆界面实现的功能描述 1.该登陆界面可以实现...

  • 照辉茗筑联袂宏宇陶瓷设计主旨沙龙在京召开

    2020年7月18日,一场别开生面的设计界大咖盛会——“宏图大业,宇你同行”照辉茗筑装饰联合宏宇陶瓷集团陶瓷设计主...

  • 有关交互设计

    大页面的设计是焦点设计,小页面的设计师空间设计。

  • 无关乎产品设计(一)

    设计经常会被一些非设计的人员想象成是一种神圣不可侵犯的活动,设计师就更像是与普通人民站在楚河汉界对立面的职业,是一...

  • 这套落选的奥运会logo 美到炸

    原来设计界从不缺drama狗血戏份! 原来设计界从不缺drama狗血戏份! 随着“方格花纹”最终胜出 2020年东...

  • 文伟

    1.登陆界面的效果图 2. 登录界面实现的功能描述 该登陆界面为超市管理设计,总的角色分为:①超市管理员与②收银员...

网友评论

      本文标题:Live-client-1-UI界面的设计

      本文链接:https://www.haomeiwen.com/subject/guijdctx.html