首页 > 代码库 > 手机影音第二天:底部菜单的实现
手机影音第二天:底部菜单的实现
主页面的下方,各个按钮的实际效果如图所示
下方的这个放置几个按钮的,实际是一个radiogroup,而radiogroup的父类是LinearLayout.
这几个按钮实际上是radiogroup的子button,然后设置了其中的图片和文字。在点击后,切换文字和图片,来实现选中的效果,类似于css里的鼠标放上去后,设置hover属性
1、activity_main.xml
先来看下主页面的布局,暂时只写了下边的这个
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 标题栏--> <!--frameLayout --> <FrameLayout android:background="#22000000" android:id="@+id/fl_main_content" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp"/> <!-- RadioGroup--> <RadioGroup android:id="@+id/rg_bottom_tag" android:padding="3dp" android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <RadioButton android:id="@+id/rb_video" android:text="本地视频" android:drawableTop="@drawable/rb_video_drawable_selector" style="@style/bottom_tag_style"/> <RadioButton android:id="@+id/rb_audio" android:text="本地音频" android:drawableTop="@drawable/rb_audio_drawable_selector" style="@style/bottom_tag_style"/> <RadioButton android:id="@+id/rb_net_video" android:text="网络视频" android:drawableTop="@drawable/rb_net_video_drawable_selector" style="@style/bottom_tag_style"/> <RadioButton android:id="@+id/rb_net_audio" android:text="网络音频" android:drawableTop="@drawable/rb_net_audio_drawable_selector" style="@style/bottom_tag_style"/> </RadioGroup> </LinearLayout>
由于这四个按钮的很多属性相同,所以抽出来,放到了style.xml里,作为一个外部引用的样式。
其中要注意的是每个RadioButton的drawableTop这个属性,这里就是显示各个图标的,引用了drawable里的各个xml资源,来实现选中时以及未选中时显示哪些图片。,下面就拿本地视频的这个来看一下这个图片的引用
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@drawable/ic_tab_video"/> <item android:state_checked="true" android:drawable="@drawable/ic_tab_video_press"/> </selector>
在radiobutton选中的时候,显示下方的那个资源图片,未选中时显示上方的那个资源图片。
2、style.xml
这几个radiobutton的共同属性抽取出来的样式,即下方的botton_tag_style
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="bottom_tag_style" > <!-- Customize your theme here. --> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@android:color/transparent</item> <!-- 这个属性保证radioButton的左侧圆圈隐藏 --> <item name="android:textColor">@drawable/rb_video_textcolor_selector</item> <item name="android:textSize">10sp</item> <item name="android:drawablePadding">3dp</item> <item name="android:layout_gravity">center_vertical</item> <item name="android:gravity">center</item> <item name="android:layout_weight">1</item> <!-- 使这四个按钮平分宽度 -->! </style> </resources>
3、MainActivity.java
在这里需要实例化这些布局,并且默认进入主页面时,选中video这个按钮
package com.yuanlp.mobileplayer.activity; import android.app.Activity; import android.os.Bundle; import android.widget.FrameLayout; import android.widget.RadioGroup; import com.yuanlp.mobileplayer.R; /** * 主页面 * Created by 原立鹏 on 2017/7/12. */ public class MainActivity extends Activity{ private FrameLayout fl_main_content; private RadioGroup rg_bottom_tag; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fl_main_content= (FrameLayout) findViewById(R.id.fl_main_content); rg_bottom_tag= (RadioGroup) findViewById(R.id.rg_bottom_tag); rg_bottom_tag.check(R.id.rb_video); //默认选中主页的本地视频 } }
现在已经完善了打开程序时的loding页面以及从loding页面切换至主页面,主页面下方的显示主菜单。下一篇博客将完善主菜单上方的主要显示区域
本文出自 “YuanGuShi” 博客,请务必保留此出处http://cm0425.blog.51cto.com/10819451/1946911
手机影音第二天:底部菜单的实现