千呼万唤始出来,今天就也写一篇Frament 的简单实例。先看效果:
一看这效果,首先我们的配置资源文件:new -->android xml -->selector -->
四个图片选择效果,一个文字选择效果
列如 tab_menu_frist:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/tabbar_mehl" android:state_selected="true" /> <item android:drawable="@drawable/tabbar_me" /> </selector>
列如 tab_menu_text:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:color="@android:color/holo_blue_bright" android:state_selected="true" /> <item android:color="@android:color/darker_gray" /> </selector>
图片资源:
-----activity_main.xml
<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"> <RelativeLayout android:id="@+id/ly_top_bar" android:layout_width="match_parent" android:layout_height="48dp" android:background="@android:color/holo_orange_light"> <TextView android:id="@+id/txt_topbar" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true" android:gravity="center" android:textSize="18sp" android:textColor="@android:color/holo_green_light" android:text="信息"/> <View android:layout_width="match_parent" android:layout_height="2px" android:background="@android:color/white" android:layout_alignParentBottom="true"/> </RelativeLayout> <LinearLayout android:id="@+id/ly_tab_bar" android:layout_width="match_parent" android:layout_height="62dp" android:layout_alignParentBottom="true" android:background="@android:color/white" android:orientation="horizontal"> <TextView android:id="@+id/txt_channel" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_frist" android:gravity="center" android:padding="5dp" android:text="@string/one" android:textColor="@drawable/tab_menu_text" android:textSize="16sp" /> <TextView android:id="@+id/txt_message" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_two" android:gravity="center" android:padding="5dp" android:text="@string/tow" android:textColor="@drawable/tab_menu_text" android:textSize="16sp" /> <TextView android:id="@+id/txt_better" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_three" android:gravity="center" android:padding="5dp" android:text="@string/three" android:textColor="@drawable/tab_menu_text" android:textSize="16sp" /> <TextView android:id="@+id/txt_setting" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_four" android:gravity="center" android:padding="5dp" android:text="@string/four" android:textColor="@drawable/tab_menu_text" android:textSize="16sp"/> </LinearLayout> <View android:id="@+id/div_tab_bar" android:layout_width="match_parent" android:layout_height="2px" android:background="@android:color/white" android:layout_above="@id/ly_tab_bar"/> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/ly_top_bar" android:layout_above="@id/div_tab_bar" android:id="@+id/ly_content"> </FrameLayout> </RelativeLayout>
再写一个中间部分的xml--->fg_content.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" > <TextView android:id="@+id/txt_content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="呵呵" android:textColor="@android:color/holo_green_light" android:textSize="20sp"/> </LinearLayout>
写一个MyFrament 继承Frament 来实例Frament
import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MyFragment extends Fragment{ private String content; public MyFragment(String content) { this.content = content; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_content,container,false); TextView txt_content = (TextView) view.findViewById(R.id.txt_content); txt_content.setText(content); return view; } }
最后,写MainActivity代码:
import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.View; import android.view.Window; import android.widget.FrameLayout; import android.widget.TextView; public class MainActivity extends Activity implements View.OnClickListener{ //UI Object private TextView txt_topbar; private TextView txt_channel; private TextView txt_message; private TextView txt_better; private TextView txt_setting; private FrameLayout ly_content; //Fragment Object private MyFragment fg1,fg2,fg3,fg4; private FragmentManager fManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); fManager = getFragmentManager(); bindViews(); txt_channel.performClick(); //模拟一次点击,既进去后选择第一项 } //UI组件初始化与事件绑定 private void bindViews() { txt_topbar = (TextView) findViewById(R.id.txt_topbar); txt_channel = (TextView) findViewById(R.id.txt_channel); txt_message = (TextView) findViewById(R.id.txt_message); txt_better = (TextView) findViewById(R.id.txt_better); txt_setting = (TextView) findViewById(R.id.txt_setting); ly_content = (FrameLayout) findViewById(R.id.ly_content); txt_channel.setOnClickListener(this); txt_message.setOnClickListener(this); txt_better.setOnClickListener(this); txt_setting.setOnClickListener(this); } //重置所有文本的选中状态 private void setSelected(){ txt_channel.setSelected(false); txt_message.setSelected(false); txt_better.setSelected(false); txt_setting.setSelected(false); } //隐藏所有Fragment private void hideAllFragment(FragmentTransaction fragmentTransaction){ if(fg1 != null)fragmentTransaction.hide(fg1); if(fg2 != null)fragmentTransaction.hide(fg2); if(fg3 != null)fragmentTransaction.hide(fg3); if(fg4 != null)fragmentTransaction.hide(fg4); } @Override public void onClick(View v) { FragmentTransaction fTransaction = fManager.beginTransaction(); hideAllFragment(fTransaction); switch (v.getId()){ case R.id.txt_channel: setSelected(); txt_channel.setSelected(true); if(fg1 == null){ fg1 = new MyFragment("第一个Fragment"); fTransaction.add(R.id.ly_content,fg1); }else{ fTransaction.show(fg1); } break; case R.id.txt_message: setSelected(); txt_message.setSelected(true); if(fg2 == null){ fg2 = new MyFragment("第二个Fragment"); fTransaction.add(R.id.ly_content,fg2); }else{ fTransaction.show(fg2); } break; case R.id.txt_better: setSelected(); txt_better.setSelected(true); if(fg3 == null){ fg3 = new MyFragment("第三个Fragment"); fTransaction.add(R.id.ly_content,fg3); }else{ fTransaction.show(fg3); } break; case R.id.txt_setting: setSelected(); txt_setting.setSelected(true); if(fg4 == null){ fg4 = new MyFragment("第四个Fragment"); fTransaction.add(R.id.ly_content,fg4); }else{ fTransaction.show(fg4); } break; } fTransaction.commit(); } }
谢谢大家的关注。 Do what you say,say what you do.