选项卡框架

有关选项卡，我相信大家对此也比较的熟悉，因为市面上的app基本上都离不开选项卡，

所以，这里有必要对选项卡进行一次总结。

首先，我们来看看顶部选项卡：

[代码]xml代码：

?

package com.zihao; import java.util.ArrayList;import java.util.List; import com.zihao.fragment.OneFragment;import com.zihao.fragment.TwoFragmnet; import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView; public class MainActivity extends FragmentActivity {     private ViewPager viewPager;// 页卡内容    private ImageView imageView;// 动画图片    private TextView voiceAnswer, healthPedia, pDected;// 选项名称    private List<Fragment> fragments;// Tab页面列表    private int offset = 0;// 动画图片偏移量    private int currIndex = 0;// 当前页卡编号    private int bmpW;// 动画图片宽度    private int selectedColor, unSelectedColor;    /** 页卡总数 **/    private static final int pageSize = 3;     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.tabwidget);         initView();    }     private void initView() {        selectedColor = getResources()                .getColor(R.color.tab_title_pressed_color);        unSelectedColor = getResources().getColor(                R.color.tab_title_normal_color);         InitImageView();        InitTextView();        InitViewPager();    }     /**     * 初始化Viewpager页     */    private void InitViewPager() {        viewPager = (ViewPager) findViewById(R.id.vPager);        fragments = new ArrayList<Fragment>();        fragments.add(new OneFragment());        fragments.add(new TwoFragmnet());        fragments.add(new TwoFragmnet());        viewPager.setAdapter(new myPagerAdapter(getSupportFragmentManager(),                fragments));        viewPager.setCurrentItem(0);        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());    }     /**     * 初始化头标     *      */    private void InitTextView() {        voiceAnswer = (TextView) findViewById(R.id.tab_1);        healthPedia = (TextView) findViewById(R.id.tab_2);        pDected = (TextView) findViewById(R.id.tab_3);         voiceAnswer.setTextColor(selectedColor);        healthPedia.setTextColor(unSelectedColor);        pDected.setTextColor(unSelectedColor);         voiceAnswer.setText("语音问答");        healthPedia.setText("健康百科");        pDected.setText("育儿检测");         voiceAnswer.setOnClickListener(new MyOnClickListener(0));        healthPedia.setOnClickListener(new MyOnClickListener(1));        pDected.setOnClickListener(new MyOnClickListener(2));    }     /**     * 初始化动画，这个就是页卡滑动时，下面的横线也滑动的效果，在这里需要计算一些数据     */     private void InitImageView() {        imageView = (ImageView) findViewById(R.id.cursor);        bmpW = BitmapFactory.decodeResource(getResources(),                R.drawable.tab_selected_bg).getWidth();// 获取图片宽度        DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW = dm.widthPixels;// 获取分辨率宽度        offset = (screenW / pageSize - bmpW) / 2;// 计算偏移量--(屏幕宽度/页卡总数-图片实际宽度)/2                                                    // = 偏移量        Matrix matrix = new Matrix();        matrix.postTranslate(offset, 0);        imageView.setImageMatrix(matrix);// 设置动画初始位置    }     /**     * 头标点击监听     */    private class MyOnClickListener implements OnClickListener {        private int index = 0;         public MyOnClickListener(int i) {            index = i;        }         public void onClick(View v) {             switch (index) {            case 0:                voiceAnswer.setTextColor(selectedColor);                healthPedia.setTextColor(unSelectedColor);                pDected.setTextColor(unSelectedColor);                break;            case 1:                healthPedia.setTextColor(selectedColor);                voiceAnswer.setTextColor(unSelectedColor);                pDected.setTextColor(unSelectedColor);                break;            case 2:                pDected.setTextColor(selectedColor);                voiceAnswer.setTextColor(unSelectedColor);                healthPedia.setTextColor(unSelectedColor);                break;            }            viewPager.setCurrentItem(index);        }     }     /**     * 为选项卡绑定监听器     */    public class MyOnPageChangeListener implements OnPageChangeListener {         int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量        int two = one * 2;// 页卡1 -> 页卡3 偏移量         public void onPageScrollStateChanged(int index) {        }         public void onPageScrolled(int arg0, float arg1, int arg2) {        }         public void onPageSelected(int index) {            Animation animation = new TranslateAnimation(one * currIndex, one                    * index, 0, 0);// 显然这个比较简洁，只有一行代码。            currIndex = index;            animation.setFillAfter(true);// True:图片停在动画结束位置            animation.setDuration(300);            imageView.startAnimation(animation);             switch (index) {            case 0:                voiceAnswer.setTextColor(selectedColor);                healthPedia.setTextColor(unSelectedColor);                pDected.setTextColor(unSelectedColor);                break;            case 1:                healthPedia.setTextColor(selectedColor);                voiceAnswer.setTextColor(unSelectedColor);                pDected.setTextColor(unSelectedColor);                break;            case 2:                pDected.setTextColor(selectedColor);                voiceAnswer.setTextColor(unSelectedColor);                healthPedia.setTextColor(unSelectedColor);                break;            }        }    }     /**     * 定义适配器     */    class myPagerAdapter extends FragmentPagerAdapter {        private List<Fragment> fragmentList;         public myPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {            super(fm);            this.fragmentList = fragmentList;        }         /**         * 得到每个页面         */        @Override        public Fragment getItem(int arg0) {            return (fragmentList == null || fragmentList.size() == 0) ? null                    : fragmentList.get(arg0);        }         /**         * 每个页面的title         */        @Override        public CharSequence getPageTitle(int position) {            return null;        }         /**         * 页面的总个数         */        @Override        public int getCount() {            return fragmentList == null ? 0 : fragmentList.size();        }    } }

?

package com.zihao.fragment; import com.zihao.R; import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup; public class OneFragment extends Fragment {     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fargment_one, null);        return view;    }}

?

package com.zihao.fragment; import com.zihao.R; import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup; public class TwoFragmnet extends Fragment {     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        // 设置activity的布局        View view = inflater.inflate(R.layout.fragment_two, null);        return view;    }}

xml里面的布局如下：

[代码]xml代码：

?

package com.zihao.fragment; import com.zihao.R; import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup; public class TwoFragmnet extends Fragment {     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        // 设置activity的布局        View view = inflater.inflate(R.layout.fragment_two, null);        return view;    }}

?

<RelativeLayout 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" >     <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="OneFragment" /> </RelativeLayout>

?

<?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" >         <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="twoFragment" /> </LinearLayout>

这就是全部的顶部选项卡的源码，效果如何大家运行了就可了解。

其次，我们来看看底部选项卡：

[代码]xml代码：

?

package com.andyidea.tabdemo; import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.Window;import android.widget.CompoundButton;import android.widget.RadioButton;import android.widget.CompoundButton.OnCheckedChangeListener;import android.widget.TabHost; public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{         private TabHost mTabHost;    private Intent mAIntent;    private Intent mBIntent;    private Intent mCIntent;    private Intent mDIntent;    private Intent mEIntent;         /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.maintabs);                 this.mAIntent = new Intent(this,AActivity.class);        this.mBIntent = new Intent(this,BActivity.class);        this.mCIntent = new Intent(this,CActivity.class);        this.mDIntent = new Intent(this,DActivity.class);        this.mEIntent = new Intent(this,EActivity.class);                 ((RadioButton) findViewById(R.id.radio_button0))        .setOnCheckedChangeListener(this);        ((RadioButton) findViewById(R.id.radio_button1))        .setOnCheckedChangeListener(this);        ((RadioButton) findViewById(R.id.radio_button2))        .setOnCheckedChangeListener(this);        ((RadioButton) findViewById(R.id.radio_button3))        .setOnCheckedChangeListener(this);        ((RadioButton) findViewById(R.id.radio_button4))        .setOnCheckedChangeListener(this);                 setupIntent();    }     @Override    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {        if(isChecked){            switch (buttonView.getId()) {            case R.id.radio_button0:                this.mTabHost.setCurrentTabByTag("A_TAB");                break;            case R.id.radio_button1:                this.mTabHost.setCurrentTabByTag("B_TAB");                break;            case R.id.radio_button2:                this.mTabHost.setCurrentTabByTag("C_TAB");                break;            case R.id.radio_button3:                this.mTabHost.setCurrentTabByTag("D_TAB");                break;            case R.id.radio_button4:                this.mTabHost.setCurrentTabByTag("MORE_TAB");                break;            }        }             }         private void setupIntent() {        this.mTabHost = getTabHost();        TabHost localTabHost = this.mTabHost;         localTabHost.addTab(buildTabSpec("A_TAB", R.string.main_home,                R.drawable.icon_1_n, this.mAIntent));         localTabHost.addTab(buildTabSpec("B_TAB", R.string.main_news,                R.drawable.icon_2_n, this.mBIntent));         localTabHost.addTab(buildTabSpec("C_TAB",                R.string.main_manage_date, R.drawable.icon_3_n,                this.mCIntent));         localTabHost.addTab(buildTabSpec("D_TAB", R.string.main_friends,                R.drawable.icon_4_n, this.mDIntent));         localTabHost.addTab(buildTabSpec("MORE_TAB", R.string.more,                R.drawable.icon_5_n, this.mEIntent));     }         private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,            final Intent content) {        return this.mTabHost.newTabSpec(tag).setIndicator(getString(resLabel),                getResources().getDrawable(resIcon)).setContent(content);    }}

?

package com.andyidea.tabdemo; import android.app.Activity;import android.os.Bundle;import android.view.Gravity;import android.widget.TextView; public class AActivity extends Activity{         @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);                 TextView tv = new TextView(this);        tv.setText("This is A Activity!");        tv.setGravity(Gravity.CENTER);        setContentView(tv);    } }

?

package com.andyidea.tabdemo; import android.app.Activity;import android.os.Bundle;import android.view.Gravity;import android.widget.TextView; public class BActivity extends Activity{     @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);                 TextView tv = new TextView(this);        tv.setText("This is B Activity!");        tv.setGravity(Gravity.CENTER);        setContentView(tv);    }     }

其中cActivity、DActivity、EActivity和AActivity、BActivity一样，这里就不上代码了。

下面来看看xml的布局

[代码]xml代码：

?

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><TextView     android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:text="@string/hello"    /></LinearLayout>

?

<?xml version="1.0" encoding="UTF-8"?><TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"  xmlns:android="http://schemas.android.com/apk/res/android">    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">        <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />        <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />            <RadioGroup android:gravity="center_vertical" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@id/main_radio" android:background="@drawable/maintab_toolbar_bg" android:layout_width="fill_parent" android:layout_height="wrap_content">                <RadioButton  android:id="@id/radio_button0" android:layout_marginTop="2.0dip" android:text="@string/main_home" android:drawableTop="@drawable/icon_1_n" style="@style/main_tab_bottom" />                <RadioButton  android:id="@id/radio_button1" android:layout_marginTop="2.0dip" android:text="@string/main_news" android:drawableTop="@drawable/icon_2_n" style="@style/main_tab_bottom" />                <RadioButton  android:id="@id/radio_button2" android:layout_marginTop="2.0dip" android:text="@string/main_manage_date" android:drawableTop="@drawable/icon_3_n" style="@style/main_tab_bottom" />                <RadioButton  android:id="@id/radio_button3" android:layout_marginTop="2.0dip" android:text="@string/main_friends" android:drawableTop="@drawable/icon_4_n" style="@style/main_tab_bottom" />                <RadioButton  android:id="@id/radio_button4" android:layout_marginTop="2.0dip" android:text="@string/more" android:drawableTop="@drawable/icon_5_n" style="@style/main_tab_bottom" />            </RadioGroup>    </LinearLayout></TabHost><br>

至此，底部选项卡也完成了，运行后就可以看到结果了

原文链接：http://www.apkbus.com/blog-708270-63596.html