オープンソースプロジェクト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です.以下は具体的なレイアウトファイルです.
<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.java
public 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を導入した後のコードです.いくつかの違いがありますか?
  • 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()