仿QQ音乐下载歌曲头部导航

      话说这是博主第一次发文，有点小激动，俗话说得好：好记性不如烂笔头，楼主尚处于菜鸟阶段，希望能把自己学到的东西分享给大家，毕竟以前每次有问题了都是来CSDN各种狂搜，也从很多大神的blog里面学到了很多，这种精神必须发扬下去，好了不多说了。下面介绍本篇blog的内容。

     头部导航现在非常常见，但是笔者觉得QQ音乐下载界面的导航做的很简洁很美观，其他应用也有很多类似的东西，据说是从ios里面仿过来，笔者就不清楚了~

 

    原理是利用fragment+radiobutton，想必大家一看就明白，废话不多说代码贴上。

    布局文件main.xml

<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=".Warning" >    <RadioGroup        android:id="@+id/radiogroup_change"        android:layout_width="fill_parent"        android:layout_height="35dp"        android:layout_gravity="bottom"        android:layout_marginLeft="20dp"        android:layout_marginRight="20dp"        android:layout_marginTop="20dp"        android:background="@drawable/radio_bg"        android:gravity="center_vertical"        android:orientation="horizontal" >        <RadioButton            android:id="@+id/radiobut_left"            style="@style/left"            android:layout_height="fill_parent"            android:checked="true"            android:drawableTop="@null"            android:text="已下载" />        <RadioButton            android:id="@+id/radiobut_right"            style="@style/right"            android:layout_height="fill_parent"            android:layout_weight="1"            android:drawableTop="@null"            android:text="正在下载" />    </RadioGroup>    <View        android:layout_width="fill_parent"        android:layout_height="0.3dip"        android:layout_marginTop="5dip"         android:background="#D5D5D5"/>    <FrameLayout        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/radiogroup_change"        android:layout_marginTop="5dp" /></LinearLayout>

    radiobbutton我没有用任何图片，边框是用corners实现的。下面是radiobutton的style

 <style name="left">        <item name="android:textSize">15sp</item>        <item name="android:textColor">@drawable/text_ic_tab_selector</item>        <item name="android:ellipsize">marquee</item>        <item name="android:gravity">center</item>        <item name="android:background">@drawable/radio_left</item>        <item name="android:paddingTop">5dip</item>        <item name="android:layout_width">fill_parent</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:button">@null</item>        <item name="android:singleLine">true</item>        <item name="android:drawablePadding">2.0dip</item><pre name="code" class="html"> <!-- 顶部选项卡背景 -->    <color name="radio_btn">#FFFFFF</color>    <color name="radio_btn_click">#14BD5A</color>

<item name="android:layout_weight">1.0</item> </style> <style name="right"> <item name="android:textSize">15sp</item> <item name="android:textColor">@drawable/text_ic_tab_selector</item> <item name="android:ellipsize">marquee</item> <item name="android:gravity">center</item> <item name="android:background">@drawable/radio_right</item> <item name="android:paddingTop">5dip</item> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@null</item> <item name="android:singleLine">true</item> <item name="android:drawablePadding">2.0dip</item> <item name="android:layout_weight">1.0</item> </style>

由于文字颜色和背景色点击时都会变化，所以引用了selector实现，下面是文字和背景的selector ,背景用了两个selector，其他的都一模一样只是边框的圆角不一样，一个是左边圆角一个是右边圆角，点击效果大家可以随意加，笔者这里偷懒了没有加。

text_ic_tab_selector.xml:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 对item的不通状态设置不同的图片，第一行是 他的状态被选中&&他没有被按下的状态就用这个图片-->    <item android:state_selected="true" android:state_pressed="false" android:color="#FFFFFF"/>    <!-- 被checked的时候并且没有按下 --><item android:state_checked="true"  android:state_pressed="false" android:color="#FFFFFF"/><item android:color="#14BD5A"/></selector>

radio_left.xml:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">                <item android:state_enabled="true" android:state_checked="true">              <shape>                  <gradient  android:endColor="@color/radio_btn_click"                      android:startColor="@color/radio_btn_click" />                                 <corners                    android:bottomLeftRadius="5.0dip"                    android:bottomRightRadius="0.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="5.0dip"                    android:topRightRadius="0.0dip" />                                <stroke                     android:width="1dp"                     android:color="@color/radio_btn_click" />            </shape>          </item>                  <item>              <shape>                  <gradient  android:endColor="@color/radio_btn"                      android:startColor="@color/radio_btn"/>                                  <corners                    android:bottomLeftRadius="5.0dip"                    android:bottomRightRadius="0.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="5.0dip"                    android:topRightRadius="0.0dip" />                                <stroke                     android:width="1dp"                     android:color="@color/radio_btn_click" />            </shape>          </item>      </selector> 

  
radio_right.xml:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">                <item android:state_enabled="true" android:state_checked="true">              <shape>                  <gradient  android:endColor="@color/radio_btn_click"                      android:startColor="@color/radio_btn_click" />                                 <corners                    android:bottomLeftRadius="0.0dip"                    android:bottomRightRadius="5.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="0.0dip"                    android:topRightRadius="5.0dip" />                                <stroke                     android:width="1dp"                     android:color="@color/radio_btn_click" />            </shape>          </item>                  <item>              <shape>                  <gradient  android:endColor="@color/radio_btn"                      android:startColor="@color/radio_btn"/>                                    <corners                    android:bottomLeftRadius="0.0dip"                    android:bottomRightRadius="5.0dip"                    android:radius="2.0dip"                    android:topLeftRadius="0.0dip"                    android:topRightRadius="5.0dip" />                               <stroke                     android:width="1dp"                     android:color="@color/radio_btn_click" />            </shape>          </item>      </selector> 

color.xml:

 <!-- 顶部选项卡背景色 -->    <color name="radio_btn">#FFFFFF</color>    <color name="radio_btn_click">#14BD5A</color>

下面是activity的代码了，因为本人使用了KJFrameForAndroid，所以大家要想copy我的代码需要去github上面下载这个框架,把jar包引用到项目就行了，具体使用上面有介绍，给大家贴上连接：https://github.com/kymjs/KJFrameForAndroid。

package com.gx.erp_android;import org.kymjs.aframe.ui.BindView;import org.kymjs.aframe.ui.activity.KJFragmentActivity;import org.kymjs.aframe.ui.fragment.BaseFragment;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.ActionBar;import android.app.Activity;import android.view.Menu;import android.view.View;import android.view.Window;import android.widget.Button;import android.widget.RadioButton;public class Warning extends KJFragmentActivity {@BindView(id = R.id.radiobut_left, click = true)public RadioButton radio_left;@BindView(id = R.id.radiobut_right, click = true)private RadioButton radio_right;private Button back;private BaseFragment view_list = new Warning_list();// 第一个界面private BaseFragment view_rili = new Warning_rili(); //第二个界面public ActionBar actionBar;public Warning() {setHiddenActionBar(true);}public void setRootView() {setContentView(R.layout.warning);}@SuppressLint("NewApi")@Overrideprotected void initWidget() {super.initWidget();actionBar = getActionBar();    changeFragment(new Warning_list());}@Overridepublic void widgetClick(View v) {super.widgetClick(v);switch (v.getId()) {case R.id.radiobut_left:changeFragment(view_list);break;case R.id.radiobut_right:changeFragment(view_rili);break;default:break;}}@Overridepublic void changeFragment(BaseFragment targetFragment) {changeFragment(R.id.content, targetFragment);}}

    关键的是布局文件radiobutton的设计，切换的原理相信大家都很清楚了，初次发文，大家请多包涵。