オープンソースプロジェクトAndroid Util-Fragmentを採用してTabHostを実現します.
20491 ワード
出典:方傑𞓜http://fangjie.info/?p=141 転載は出典を明記してください.
Androidを勉強している間もありました.ほとんどのAndroidアプリは似たような部品がたくさんあると思います.だから、このようなオープンソースプロジェクトをするつもりです.gitアドレス:https://github.com/JayFang1993/AndroidUtil
余計なことを言わないで、まず最初によく使うコンポーネントTabHostの実現について話します.以前はTabActivityを継承することで実現できましたが、その後のAPIではもうこのような方式は提案されていません.ですから、今日は主にFragmentでTabhostを実現すると言いました.新浪微博など多くのAPPには底部タブTabHostがあります.まず実現後の効果を見てください.
一、TabHostの実現
Tabhostの各タブはRadio Groupによって実現され、各TabはRadio Buttonである.ページはTabHost以外の内容エリアがFragmentです.以下は具体的なレイアウトファイルです. 3.0前に導入すべきです. import android.support.v.4.ap.*;このカバンの中にFragment関連の種類があります.3.o以降は直接Android.ap.*を導入できます. 3.0以前のMainAcitivityはFrangentActivityから継承され、3.0以降は直接Activityから継承されます. 3.0前 frame ntManager=get Support FrangentManager()3.0以降 frame ntManager=getFrangementManager()
Androidを勉強している間もありました.ほとんどのAndroidアプリは似たような部品がたくさんあると思います.だから、このようなオープンソースプロジェクトをするつもりです.gitアドレス:https://github.com/JayFang1993/AndroidUtil
余計なことを言わないで、まず最初によく使うコンポーネントTabHostの実現について話します.以前はTabActivityを継承することで実現できましたが、その後のAPIではもうこのような方式は提案されていません.ですから、今日は主にFragmentでTabhostを実現すると言いました.新浪微博など多くのAPPには底部タブTabHostがあります.まず実現後の効果を見てください.
一、TabHostの実現
Tabhostの各タブはRadio Groupによって実現され、各TabはRadio Buttonである.ページはTabHost以外の内容エリアがFragmentです.以下は具体的なレイアウトファイルです.
<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"
tools:context=".MainActivity" >
<TextView
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:id="@+id/title"
android:text=" "
android:textSize="18dp"
android:textColor="#a8aeb5"
android:typeface="monospace"
android:background="@drawable/title_bg" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Done"
android:textColor="#a8aeb5"
android:layout_marginTop="10dp"
android:layout_marginRight="8dp"
android:background="@drawable/done" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/back"
android:textColor="#a8aeb5"
android:text="Back"
android:layout_alignParentLeft="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="8dp"
/>
<FrameLayout
android:id="@+id/content"
android:layout_below="@id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<RadioGroup
android:id="@+id/main_radio"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:background="@drawable/tabhost_bg" >
<RadioButton
android:id="@+id/rb_home"
android:drawableTop="@drawable/tab1"
style="@style/tab"
android:text=" " />
<RadioButton
android:id="@+id/rb_at"
style="@style/tab"
android:drawableTop="@drawable/tab2"
android:text=" " />
<RadioButton
android:id="@+id/rb_mess"
style="@style/tab"
android:drawableTop="@drawable/tab3"
android:text=" " />
<RadioButton
android:id="@+id/rb_more"
style="@style/tab"
android:drawableTop="@drawable/tab4"
android:text=" " />
</RadioGroup>
</RelativeLayout>
各Tabのスタイル:幅、高さ、背景画像などは同じです.だから、スタイルファイルに書きました.style.xml<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="tab">
<item name="android:layout_height">48dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center</item>
<item name="android:textSize">10dp</item>
<item name="android:paddingTop">8dp</item>
<item name="android:background">@drawable/tabhost_bg_selector</item>
<item name="android:textColor">#a8aeb5</item>
<item name="android:button">@null</item>
</style>
</resources>
Tabが選択された効果を出すために、Tabの背景にselectorを設計しました.tabhost_bg_selector.xml<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tabhost_press" android:state_pressed="true" />
<item android:drawable="@drawable/tabhost_press" android:state_checked="true" />
<item android:drawable="@drawable/tabhost_bg"/>
</selector>
これでTabHostに関するレイアウトファイルは全部書き終わりました.ActivityのJavaコードを見てみます.MainActivity.javapublic class MainActivity extends FragmentActivity {
private FragmentManager fragmentManager;
private RadioGroup radioGroup;
private RadioButton rb1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragmentManager = getSupportFragmentManager();
radioGroup = (RadioGroup) findViewById(R.id.main_radio);
rb1=(RadioButton) findViewById(R.id.rb_home);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@SuppressLint("NewApi")
public void onCheckedChanged(RadioGroup group, int checkedId) {
rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_bg_selector));
FragmentTransaction transaction = fragmentManager.beginTransaction();
ContentFrame fragment = null;
switch(checkedId)
{
case 0:
fragment= new ContentFrame();
break;
case 1:
fragment= new ContentFrame();
break;
case 2:
fragment= new ContentFrame();
break;
case 3:
fragment= new ContentFrame();
break;
default:
fragment= new ContentFrame();
break;
}
transaction.replace(R.id.content, (Fragment)fragment);
transaction.commit();
}
});
//
radioGroup.check(1);
radioGroup.check(0);
//
rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_press));
}
}
各タブの内容インタフェースコードに対して、レイアウトファイルを勝手に書いてください.<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="match_parent"
android:layout_height="match_parent"
android:id="@+id/content"
/>
</LinearLayout>
内容部分のJavaコードはActivityとほぼ同じですが、ここではActivityではなくFragmentを引き継ぐ必要があります.content.xmlからViewを得て、MainのFragment部分をこのViewに置き換えます.public class ContentFrame extends Fragment{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.content, null);
TextView textView = (TextView) view.findViewById(R.id.content);
textView.setText("Hello world");
return view;
}
}
追加:以上のコードはAndroid 3.0以前のAPIにFragmentがないことを考慮して、Android-support-v 4.jarを導入した後のコードです.いくつかの違いがありますか?