Fragment制作标签
效果图如下:
当点击上面的标签时,低下会显示出相应的标签页面,具体实现如下:
1)首先在Main_Activity.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">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/tab1" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="生活新闻"/> <TextView android:id="@+id/tab2" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="军事新闻"/> <TextView android:id="@+id/tab3" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="娱乐新闻"/> <TextView android:id="@+id/tab4" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="百度新闻"/> </LinearLayout>
<LinearLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
</LinearLayout>
</LinearLayout>
|
2)分别建立四个用于显示标签页内容的而已文件
fragment1.xml
<?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" android:gravity="center" android:layout_gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="生活新闻"/> </LinearLayout>
|
fragment2.xml
<?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" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="军事新闻"/> </LinearLayout>
|
fragment3.xml
<?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" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="娱乐新闻"/> </LinearLayout>
|
fragment4.xml
<?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" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="百度新闻"/> </LinearLayout>
|
3)在MainActivity.java类中实现如下代码:
package zjh.android.fragmenttab;
import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.TextView;
public class MainActivity extends Activity implements OnClickListener { private TextView tab1,tab2,tab3,tab4; FragmentManager fm = null ; FragmentTransaction ft = null ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setContentView(R.layout.activity_main); this.tab1 = (TextView)super.findViewById(R.id.tab1); this.tab2 = (TextView)super.findViewById(R.id.tab2); this.tab3 = (TextView)super.findViewById(R.id.tab3); this.tab4 = (TextView)super.findViewById(R.id.tab4); this.tab1.setOnClickListener(this); this.tab2.setOnClickListener(this); this.tab3.setOnClickListener(this); this.tab4.setOnClickListener(this); fm = super.getFragmentManager(); ft = fm.beginTransaction(); ft.replace(R.id.content,new Fragment1()); ft.commit(); } @Override public void onClick(View view) { ft = fm.beginTransaction(); switch (view.getId()) { case R.id.tab1: ft.replace(R.id.content,new Fragment1()); break; case R.id.tab2: ft.replace(R.id.content,new Fragment2()); break; case R.id.tab3: ft.replace(R.id.content,new Fragment3()); break; case R.id.tab4: ft.replace(R.id.content,new Fragment4()); break; } ft.commit(); }
}
|
4)分别建立四个实现了Fragment类的子类,用于加载标签内容显示的页面:
Fragment1.java
package zjh.android.fragmenttab;
import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment1,null); }
}
|
Fragment2.java
package zjh.android.fragmenttab;
import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;
public class Fragment2 extends Fragment {
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment2,null); }
}
|
Fragment3.java
package zjh.android.fragmenttab;
import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;
public class Fragment3 extends Fragment {
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment3,null); }
}
|
Fragment4.java
package zjh.android.fragmenttab;
import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;
public class Fragment4 extends Fragment {
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment4,null); }
}
|
此时,Fragment的标签页效果就实现了。