Fragment實(shí)例精講——新聞(購(gòu)物)類(lèi)App列表Fragment的簡(jiǎn)單實(shí)現(xiàn)
本節(jié)引言:
相信大家對(duì)點(diǎn)擊列表,然后進(jìn)入詳情這種App并不陌生吧,在購(gòu)物類(lèi)App和新聞?lì)怉pp中最為常見(jiàn): 下面我們簡(jiǎn)單來(lái)講一下流程邏輯!
邏輯流程講解:
剛好公司測(cè)試妹子的測(cè)試機(jī)上裝了楚楚街9塊9的APP,呵呵,直接就照這個(gè)來(lái)研究吧:
嘿嘿,市面上很多APP都是這種樣子的,而這個(gè)可以用我們學(xué)到的Fragment來(lái)實(shí)現(xiàn): 可能gif動(dòng)畫(huà)看不清,筆者用界面原型工具畫(huà)個(gè)大概吧:
大概就這樣,中間區(qū)域是一個(gè)布局容器,一般是FrameLayout,然后我們將一個(gè)Fragment replace 到這個(gè)容器中或者add也行,而這個(gè)Fragment中有一個(gè)listview,當(dāng)我們點(diǎn)擊這個(gè)ListView中的一項(xiàng), 中間容器中的Fragment就會(huì)被replace成對(duì)應(yīng)詳細(xì)信息的Fragment所替代,如果我們只是replace的話(huà), 就不會(huì)保存第一個(gè)Fragment的狀態(tài),用戶(hù)又得從頭開(kāi)始瀏覽,這肯定是很不方便的,這里我們可以 通過(guò)Fragment棧的addtobackStack和popbackstack來(lái)解決這個(gè)問(wèn)題!當(dāng)replace的同時(shí),我們將被替換 的Fragment添加到stack中,當(dāng)用戶(hù)點(diǎn)擊回退按鈕時(shí),調(diào)用popbackstack彈出棧,具體實(shí)現(xiàn)見(jiàn)下述代碼 示例!
2.代碼示例:簡(jiǎn)單新聞?lì)怉PP列表和內(nèi)容切換的實(shí)現(xiàn)
運(yùn)行效果圖:
實(shí)現(xiàn)代碼:
Step 1:先把兩個(gè)Fragment以及Activity的布局實(shí)現(xiàn)了
fg_newlist.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:background="../style/images/white" android:orientation="horizontal"> <ListView android:id="@+id/list_news" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
fg_context.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:textColor="../style/images/blue" android:textSize="20sp" /> </LinearLayout>
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"> <TextView android:id="@+id/txt_title" android:layout_width="match_parent" android:layout_height="56dp" android:background="../style/images/blue" android:textColor="../style/images/white" android:text="新聞列表" android:textSize="20sp" android:textStyle="bold" android:gravity="center"/> <FrameLayout android:id="@+id/fl_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/txt_title"/> </RelativeLayout>
Step 2:實(shí)現(xiàn)我們的業(yè)務(wù)Bean類(lèi)和自定義BaseAdapter類(lèi):
Data.java:
/** * Created by Jay on 2015/9/6 0006. */ public class Data { private String new_title; private String new_content; public Data(){} public Data(String new_title, String new_content) { this.new_title = new_title; this.new_content = new_content; } public String getNew_title() { return new_title; } public String getNew_content() { return new_content; } public void setNew_title(String new_title) { this.new_title = new_title; } public void setNew_content(String new_content) { this.new_content = new_content; } }
MyAdapter.java:
/** * Created by Jay on 2015/9/6 0006. */ public class MyAdapter extends BaseAdapter{ private List<Data> mData; private Context mContext; public MyAdapter(List<Data> mData, Context mContext) { this.mData = mData; this.mContext = mContext; } @Override public int getCount() { return mData.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder; if(convertView == null){ convertView = LayoutInflater.from(mContext).inflate(R.layout.list_item,parent,false); viewHolder = new ViewHolder(); viewHolder.txt_item_title = (TextView) convertView.findViewById(R.id.txt_item_title); convertView.setTag(viewHolder); }else{ viewHolder = (ViewHolder) convertView.getTag(); } viewHolder.txt_item_title.setText(mData.get(position).getNew_title()); return convertView; } private class ViewHolder{ TextView txt_item_title; } }
Step 3:MainActivity的實(shí)現(xiàn)
MainActivity.java:
public class MainActivity extends AppCompatActivity { private TextView txt_title; private FrameLayout fl_content; private Context mContext; private ArrayList<Data> datas = null; private FragmentManager fManager = null; private long exitTime = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mContext = MainActivity.this; fManager = getFragmentManager(); bindViews(); datas = new ArrayList<Data>(); for (int i = 1; i <= 20; i++) { Data data = new Data("新聞標(biāo)題" + i, i + "~新聞內(nèi)容~~~~~~~~"); datas.add(data); } NewListFragment nlFragment = new NewListFragment(fManager, datas); FragmentTransaction ft = fManager.beginTransaction(); ft.replace(R.id.fl_content, nlFragment); ft.commit(); } private void bindViews() { txt_title = (TextView) findViewById(R.id.txt_title); fl_content = (FrameLayout) findViewById(R.id.fl_content); } //點(diǎn)擊回退鍵的處理:判斷Fragment棧中是否有Fragment //沒(méi),雙擊退出程序,否則像是Toast提示 //有,popbackstack彈出棧 @Override public void onBackPressed() { if (fManager.getBackStackEntryCount() == 0) { if ((System.currentTimeMillis() - exitTime) > 2000) { Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show(); exitTime = System.currentTimeMillis(); } else { super.onBackPressed(); } } else { fManager.popBackStack(); txt_title.setText("新聞列表"); } } }
Step 4:列表Fragment的實(shí)現(xiàn):
NewListFragment.java:
package com.jay.fragmentdemo4; import android.app.Fragment; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ListView; import android.widget.TextView; import java.util.ArrayList; /** * Created by Jay on 2015/9/6 0006. */ public class NewListFragment extends Fragment implements AdapterView.OnItemClickListener { private FragmentManager fManager; private ArrayList<Data> datas; private ListView list_news; public NewListFragment(FragmentManager fManager, ArrayList<Data> datas) { this.fManager = fManager; this.datas = datas; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_newlist, container, false); list_news = (ListView) view.findViewById(R.id.list_news); MyAdapter myAdapter = new MyAdapter(datas, getActivity()); list_news.setAdapter(myAdapter); list_news.setOnItemClickListener(this); return view; } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { FragmentTransaction fTransaction = fManager.beginTransaction(); NewContentFragment ncFragment = new NewContentFragment(); Bundle bd = new Bundle(); bd.putString("content", datas.get(position).getNew_content()); ncFragment.setArguments(bd); //獲取Activity的控件 TextView txt_title = (TextView) getActivity().findViewById(R.id.txt_title); txt_title.setText(datas.get(position).getNew_content()); //加上Fragment替換動(dòng)畫(huà) fTransaction.setCustomAnimations(R.anim.fragment_slide_left_enter, R.anim.fragment_slide_left_exit); fTransaction.replace(R.id.fl_content, ncFragment); //調(diào)用addToBackStack將Fragment添加到棧中 fTransaction.addToBackStack(null); fTransaction.commit(); } }
Step 5:內(nèi)容Fragment的實(shí)現(xiàn):
NewContentFragment.java:
/** * Created by Jay on 2015/9/6 0006. */ public class NewContentFragment extends Fragment { NewContentFragment() { } @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); //getArgument獲取傳遞過(guò)來(lái)的Bundle對(duì)象 txt_content.setText(getArguments().getString("content")); return view; } }
代碼很簡(jiǎn)單,就不慢慢解釋了~
3.代碼下載
FragmentDemo5.zip:下載 FragmentDemo5.zip
本節(jié)小結(jié):
因?yàn)闀r(shí)間的關(guān)系,并沒(méi)有詳細(xì)的去做過(guò)多的講解,示例代碼也很簡(jiǎn)單,方便各位初學(xué)者理解! 如果要用到實(shí)際項(xiàng)目中還需要對(duì)此進(jìn)行一番修改~!好的,本節(jié)就到這里,謝謝~