Android开发手机影音篇之Radio Group实现导航主页面

来源：互联网发布：无法连接这个网络热点编辑：程序博客网时间：2024/04/28 06:23

一、主页面分析

我们把主页面做成这个样子的。首先从总体的大结构上分析，它是一个线性布局（LinearLayout），方向为垂直方向，最上面为标题栏，中间为内容区，最下面为导航栏。

①标题栏：它也是线性布局，总体方向为水平方向。这里我们可以把标题栏作为单独的一块去处理。创建一个class extends LinearLayout 实现自定义View。

最左面为一个ImageView 右面为一个TextView drawableLeft为一个搜索框选择器（state_pressed="false"时灰暗图片 state_pressed="true"后高亮）background为自定义的矩形颜色为深蓝色。再右面为一个小相对布局，一个手柄Image View右上角为一个红点Image View。最右面为一个简单的ImageView。代码如下：

<com.example.administrator.mobleplayer.view.TitleBar xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="55dp"    android:background="#ff3097fd"    android:gravity="center_vertical">    <ImageView        android:layout_marginLeft="8dp"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/ic_topbanner_logo"/>    <TextView        android:id="@+id/tv_search"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="8dp"        android:layout_weight="1"        android:background="@drawable/tv_search_bg_selector"        android:clickable="true"        android:drawableLeft="@drawable/tv_search_drawable_selector"        android:drawablePadding="3dp"        android:text="全网搜索"        android:textColor="@drawable/tv_search_textcolor_selector"        android:textSize="14sp" />    <RelativeLayout        android:id="@+id/rl_game"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="5dp">        <ImageView            android:id="@+id/tv_game"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_topbanner_game"/>        <ImageView            android:layout_width="6dp"            android:layout_height="6dp"            android:layout_alignRight="@id/tv_game"            android:background="@drawable/dot"/>    </RelativeLayout>    <ImageView        android:id="@+id/iv_record"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="5dp"        android:layout_marginRight="8dp"        android:src="@drawable/ic_topbanner_record"/></com.example.administrator.mobleplayer.view.TitleBar>

在TitelBar里重写onFinishInflate获取了每个View 并设置点击事件吐丝。

②内容区：在这里我们要随着导航栏的切换来替换页面，所以使用帧布局（Frame Layout）。

③导航栏：使用RadioGroup 嵌套进四个RadioButton。drawableTop设置selector（state_checked="false"时显示灰暗图片 state_checked="true"时显示高亮图片）

<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"    tools:context="com.example.administrator.mobleplayer.Activity.OneActivity">    <include layout="@layout/titlebar"/>    <FrameLayout        android:id="@+id/fl_one_content"        android:layout_weight="1"        android:layout_width="match_parent"        android:layout_height="wrap_content">    </FrameLayout>    <RadioGroup        android:id="@+id/rg_one_tag"        android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#11000000"        android:gravity="center_vertical"        android:padding="3dp">        <RadioButton            android:id="@+id/rb_video"            android:text="本地视频"            android:drawableTop="@drawable/rb_video_selector"            style="@style/bottom_tag_style"/>        <RadioButton            android:id="@+id/rb_audio"            android:text="本地音乐"            android:drawableTop="@drawable/rb_audio_selector"            style="@style/bottom_tag_style"/>        <RadioButton            android:id="@+id/rb_net_video"            android:text="网络视频"            android:drawableTop="@drawable/rb_net_video_selector"            style="@style/bottom_tag_style"/>        <RadioButton            android:id="@+id/rb_net_audio"            android:text="网络音乐"            android:drawableTop="@drawable/rb_net_audio_selector"            style="@style/bottom_tag_style"/>    </RadioGroup></LinearLayout>

我们还在style文件里设置了Radio Button的共有属性。

<style name="bottom_tag_style">    <item name="android:layout_width">wrap_content</item>    <item name="android:layout_height">wrap_content</item>    <item name="android:layout_gravity">center_vertical</item>    <item name="android:button">@android:color/transparent</item>    <item name="android:drawablePadding">3dp</item>    <item name="android:gravity">center</item>    <item name="android:textColor">@drawable/ic_textcolor_selector</item>    <item name="android:textSize">10sp</item>    <item name="android:layout_weight">1</item></style>

主页面完成。

二、添加每个页面

每个Radio Button对应一个自己的页面，我们先创建一个抽象BasePager 加载视图、加载数据。然后创建四个pager extends BasePager

public abstract class BasePager {    public final Context context;    public View rootview;    public boolean isInitData;    public BasePager(Context context) {        this.context = context;        rootview = initView();    }    /**     * 加载视图     * @return     */    public abstract View initView();    /**     * 加载数据     */    public void initData(){    }}

在主页面OneActivity里创建一个数组泛型为BasePager 然后将四个Pager添加进去。设置Radio Group的监听器，选中哪个后替换相应fragement。替换fragement有五个步骤：1.创建待添加碎片的实例。（不能替换内部类）

2.通过getSupportFragmentManager获取FragmentManager

3.开启事务 beginTransaction

4.replace（）传入容器的id和第一步中创建的实例

5.提交事务 commit（）。

在获取带添加的实例时，获取到了当前basePager 通过basePager.initData 和currPager.rootview加载数据和视图。

public class OneActivity extends FragmentActivity {    public  static final String TAG = "OneActivity";    private RadioGroup rg_one_tag;    private ArrayList<BasePager> basePagers;    private int position;    private ReplaceFragment replaceFragment;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_one);        Log.d(TAG,"运行OneActivity");        rg_one_tag = (RadioGroup) findViewById(R.id.rg_one_tag);        //添加Pager        basePagers = new ArrayList<>();        basePagers.add(new VideoPager(this));        basePagers.add(new AudioPager(this));        basePagers.add(new NetVideoPager(this));        basePagers.add(new NetAudioPager(this));        //设置RadioGroup的监听器        rg_one_tag.setOnCheckedChangeListener(new MyOnCheckedChangeListener());        rg_one_tag.check(R.id.rb_video);//默认选中首页    }    class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener{        @Override        public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {            switch (checkedId){                default:                    position = 0;                    Log.d(TAG,"点击了本地视频");                    break;                case R.id.rb_audio:                    position = 1;                    Log.d(TAG,"点击了本地音乐");                    break;                case R.id.rb_net_video:                    position = 2;                    Log.d(TAG,"点击了网络视频");                    break;                case R.id.rb_net_audio:                    position = 3;                    Log.d(TAG,"点击了网络音乐");                    break;            }            setFragment();        }    }    /**     * replace替换fragment不能用内部类 否则会报错     */    private void setFragment() {        //得到FragmentManger        FragmentManager manager = getSupportFragmentManager();        //开启事务        FragmentTransaction ft = manager.beginTransaction();        //替换        replaceFragment = new ReplaceFragment(getBasePager());        ft.replace(R.id.fl_one_content,replaceFragment);        //提交事务        ft.commit();    }    /**     * 根据getBasePager获得当前页面currPager → initView = rootview     * 获取待添加的碎片实例     */    private static class ReplaceFragment extends Fragment {        public BasePager currPager;        public ReplaceFragment(BasePager basePager) {            this.currPager = basePager;        }        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                                 Bundle savedInstanceState) {            if (currPager != null) {                //rootview = initView（）                return currPager.rootview;            }            return null;        }    }    /**     * 根据相应的位置获得页面     * @return     */    private BasePager getBasePager() {        BasePager basePager = basePagers.get(position);        //因为在上边没有使用内部类 所以根据日志分析先得到了initData，再得到了rootview        if (basePager != null && !basePager.isInitData) {            basePager.isInitData = true;            basePager.initData();        }        return basePager;    }}

最后我们在加上一个按两次back键推出软件功能在onKeyDown里监听back按键按back后先进入到第一个Pager return true 软件不退出然后按back 吐丝再按一次退出，延时2秒后return true 软件不退出，2秒内令isExit为true，return 默认super 即软件退出。

    private boolean isExit = false;    /**     *当return false 时 此activity 退出     * @param keyCode     * @param event     * @return     */    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if (keyCode == KeyEvent.KEYCODE_BACK) {            if (position != 0) {                position = 0;                rg_one_tag.check(R.id.rb_video);                return true;            } else if (!isExit) {                isExit = true;                Toast.makeText(this, "再按一次退出", Toast.LENGTH_SHORT).show();                new Handler().postDelayed(new Runnable() {                    @Override                    public void run() {                        isExit = false;                    }                },2000);                return true;            }        }        return super.onKeyDown(keyCode, event);    }

阅读全文

0 0