有关选项卡，我相信大家对此也比较的熟悉，因为市面上的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 ListFragment> 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(); } private void InitViewPager() { viewPager = (ViewPager) findViewById(R.id.vPager); fragments = new ArrayListFragment>(); 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 ListFragment> fragmentList; public myPagerAdapter(FragmentManager fm, ListFragment> fragmentList) { super(fm); this.fragmentList = fragmentList; } @Override public Fragment getItem(int arg0) { return (fragmentList == null || fragmentList.size() == 0) ? null : fragmentList.get(arg0); } @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; @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

ITPub博客

选项卡框架

[代码]xml代码：

[代码]xml代码：

[代码]xml代码：

[代码]xml代码：

最新文章