主界面绘制加载轮播图减少apk体积（简易音乐五）

Posted 2021-07-20 Tobey_r1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了主界面绘制加载轮播图减少apk体积（简易音乐五）相关的知识，希望对你有一定的参考价值。

主界面绘制、加载轮播图、减少apk体积（简易音乐五）

关于

关于

本篇主要是主界面的绘制、包括底部菜单栏、首页轮播图（把所有东西都放本篇来讲会显得篇幅太长，而且思路不一定会清晰，本着解耦的想法，我会尽量把一些内容分开，以简易音乐文章系列之一形式出现，就比如Android三方框架banner实现轮播图、比如android实现沉浸式状态栏）
上一篇修改登录判断以及数据保存（简易音乐四）

本篇首页的底部菜单栏用的是RadioButton，轮播图用的是第三方banner+viewpager2，关于banner的详细使用可以参考这篇Android三方框架banner实现轮播图

效果图

在这里插入图片描述

底部导航栏菜单资源

图片链接：提取码：tf7x
在这里插入图片描述可以看到几乎大部分都是.webp格式图片，如何转换可以参考Android使用.webp替换.jpeg与.png格式图片减少图片大小，好处就是图片大小锐减。

第一步，修改activity_main.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/whitesmoke"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frame_main"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="match_parent">
    </FrameLayout>
    <RadioGroup
        android:id="@+id/rg_tabs"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp">

        <RadioButton
            android:id="@+id/rb_main"
            style="@style/tab_RadioButton_normal"
            android:drawableTop="@drawable/bottom_home_style"
            android:text="@string/home_page"
            />

        <RadioButton
            android:id="@+id/rb_contact"
            style="@style/tab_RadioButton_normal"
            android:drawableTop="@drawable/bottom_me_style"
            android:text="@string/me"
            />

        <RadioButton
            android:id="@+id/rb_me"
            style="@style/tab_RadioButton_normal"
            android:drawableTop="@drawable/bottom_topic_style"
            android:text="@string/cloud"
             />


    </RadioGroup>
</LinearLayout>

添加radiobutton的图片样式bottom_home_style.xml，其他两个复制修改即可。：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/icon_home_select"/>
    <item android:drawable="@mipmap/icon_home"/>
</selector>

在res/values/styles.xml下添加对应text1的tab_RadioButton_normal主题：

  <style name="tab_RadioButton_normal">
        <item name="android:button">@null</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/bottom_text_style</item>
        <item name="android:textSize">@dimen/dp_10</item>
        <item name="android:drawablePadding">@dimen/dp_3</item>
    </style>

其中text颜色选取样式bottom_text_style.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorAccent"/>
    <item android:color="@color/textGray"/>
    <!--<color name="textGray">#707070</color>-->
</selector>

新增Fragment_main.java碎片

修改res/values/strings.xml文件：

 <string name="app_name">简易音乐</string>

    <!-- TODO: Remove or change this placeholder text -->
    <string name="hello_blank_fragment">Hello blank fragment</string>
    <string name="back">&lt;</string>
    <string name="home_page">发现</string>
    <string name="me">我的</string>
    <string name="cloud">云村</string>
    <string name="day_recommend">每日推荐</string>
    <string name="playlist">歌单</string>
    <string name="rank">排行榜</string>
    <string name="radio">电台</string>
    <string name="live">直播</string>
    <string name="fm">私人FM</string>
    <string name="recommend_playlist">懂你的精选歌单</string>
    <string name="playlist_playground">查看更多</string>
    <string name="login_phone_number">手机号登录</string>
    <string name="press_exit_again">再按一次退出应用</string>
    <string name="input_phone">请输入手机号</string>
    <string name="input_pwd">请输入密码</string>
    <string name="login">立即登录</string>
    <string name="login_title">登 录</string>
    <string name="please_input_phonenumber">请输入手机号码</string>
    <string name="please_input_phonenumber_correctly">请输入有效的电话号码</string>
    <string name="please_input_pwd">请输入密码</string>
    <string name="pwd_must_less_than_30">请输入小于30位的密码</string>
    <string name="enter_correct_password">请正确输入密码</string>
    <string name="search">搜索</string>
    <string name="search_history">历史</string>
    <string name="hot_search">热搜榜</string>

修改fragment_main.xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >


    <RelativeLayout
        android:id="@+id/layout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/content_main" />

        <FrameLayout
            android:id="@+id/fl_banner"
            android:layout_below="@+id/content_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_95"
                android:background="@color/colorPrimary" />

            <com.youth.banner.Banner
                android:id="@+id/banner"
                android:background="@drawable/banner_background_style"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_160"
                android:layout_marginStart="@dimen/dp_15"
                android:layout_marginTop="@dimen/dp_15"
                android:layout_marginEnd="@dimen/dp_15" />

        </FrameLayout>

        <LinearLayout
            android:id="@+id/ll_function"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_74"
            android:layout_below="@id/fl_banner"
            android:layout_marginTop="@dimen/dp_15"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/dp_20"
            android:paddingRight="@dimen/dp_20">

            <RelativeLayout
                android:id="@+id/rl_day_rec"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <RelativeLayout
                    android:id="@+id/test"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    >
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:id="@+id/text_fm"
                        android:layout_centerHorizontal="true"
                        android:text="9"
                        android:textColor="#333333"
                        android:textSize="@dimen/sp_12" />
                    <ImageView
                        android:id="@+id/iv_day_recommend"
                        android:layout_width="@dimen/dp_50"
                        android:layout_height="@dimen/dp_50"

                        android:background="@mipmap/ic_daily_recommend">

                    </ImageView>
                </RelativeLayout>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/test"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="@dimen/dp_4"
                    android:text="@string/day_recommend"
                    android:textColor="#333333"
                    android:textSize="@dimen/sp_12" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_mine_fm"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_mine_fm"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    android:layout_centerHorizontal="true"
                    android:background="@mipmap/ic_mine_fm" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv_mine_fm"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="@dimen/dp_4"
                    android:text="@string/fm"
                    android:textColor="#333333"
                    android:textSize="@dimen/sp_12" />
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_play_list"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_playlist"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    android:layout_centerHorizontal="true"
                    android:background="@mipmap/ic_playlist" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    以上是关于主界面绘制加载轮播图减少apk体积（ 简易音乐 五）的主要内容，如果未能解决你的问题，请参考以下文章 
 新增我的推荐歌单通过ViewPager2+RadioGroup重构主界面（ 简易音乐 六）
 Android简易音乐重构MVVM Java版-新增轮播图网页链接跳转展示（十五）
 Android简易音乐重构MVVM Java版-新增轮播图网页链接跳转展示（十五）
 Android简易音乐重构MVVM Java版-github开源+功能介绍（二十三）
 Android简易音乐重构MVVM Java版-github开源+功能介绍（二十三）
 Android简易音乐重构MVVM Java版-github开源+功能介绍（二十三）

主界面绘制加载轮播图减少apk体积（ 简易音乐 五）

主界面绘制、加载轮播图、减少apk体积（ 简易音乐 五）

关于

效果图

底部导航栏菜单资源

第一步，修改activity_main.xml布局文件

新增Fragment_main.java碎片

主界面绘制加载轮播图减少apk体积（简易音乐五）

主界面绘制、加载轮播图、减少apk体积（简易音乐五）