[关闭]
@coder-pig 2015-09-07T10:12:17.000000Z 字数 7179 阅读 1968

Android基础入门教程——5.2.5 Fragment实例精讲——新闻(购物)类App列表Fragment的简单实现

Android基础入门教程


本节引言:

相信大家对点击列表,然后进入详情这种App并不陌生吧,在购物类App和新闻类App中最为常见:
下面我们简单来讲一下流程逻辑!


1.逻辑流程讲解:

刚好公司测试妹子的测试机上装了楚楚街9块9的APP,呵呵,直接就照这个来研究吧:

嘿嘿,市面上很多APP都是这种样子的,而这个可以用我们学到的Fragment来实现:
可能gif动画看不清,笔者用界面原型工具画个大概吧:

大概就这样,中间区域是一个布局容器,一般是FrameLayout,然后我们将一个Fragment replace
到这个容器中或者add也行,而这个Fragment中有一个listview,当我们点击这个ListView中的一项,
中间容器中的Fragment就会被replace成对应详细信息的Fragment所替代,如果我们只是replace的话,
就不会保存第一个Fragment的状态,用户又得从头开始浏览,这肯定是很不方便的,这里我们可以
通过Fragment栈的addtobackStack和popbackstack来解决这个问题!当replace的同时,我们将被替换
的Fragment添加到stack中,当用户点击回退按钮时,调用popbackstack弹出栈,具体实现见下述代码
示例!


2.代码示例:简单新闻类APP列表和内容切换的实现

运行效果图

实现代码

Step 1:先把两个Fragment以及Activity的布局实现了

fg_newlist.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="@color/white"
  6. android:orientation="horizontal">
  7. <ListView
  8. android:id="@+id/list_news"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent" />
  11. </LinearLayout>

fg_context.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6. <TextView
  7. android:id="@+id/txt_content"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:gravity="center"
  11. android:textColor="@color/blue"
  12. android:textSize="20sp" />
  13. </LinearLayout>

activity_main.xml:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity">
  6. <TextView
  7. android:id="@+id/txt_title"
  8. android:layout_width="match_parent"
  9. android:layout_height="56dp"
  10. android:background="@color/blue"
  11. android:textColor="@color/white"
  12. android:text="新闻列表"
  13. android:textSize="20sp"
  14. android:textStyle="bold"
  15. android:gravity="center"/>
  16. <FrameLayout
  17. android:id="@+id/fl_content"
  18. android:layout_width="match_parent"
  19. android:layout_height="match_parent"
  20. android:layout_below="@id/txt_title"/>
  21. </RelativeLayout>

Step 2:实现我们的业务Bean类和自定义BaseAdapter类:

Data.java:

  1. /**
  2. * Created by Jay on 2015/9/6 0006.
  3. */
  4. public class Data {
  5. private String new_title;
  6. private String new_content;
  7. public Data(){}
  8. public Data(String new_title, String new_content) {
  9. this.new_title = new_title;
  10. this.new_content = new_content;
  11. }
  12. public String getNew_title() {
  13. return new_title;
  14. }
  15. public String getNew_content() {
  16. return new_content;
  17. }
  18. public void setNew_title(String new_title) {
  19. this.new_title = new_title;
  20. }
  21. public void setNew_content(String new_content) {
  22. this.new_content = new_content;
  23. }
  24. }

MyAdapter.java:

  1. /**
  2. * Created by Jay on 2015/9/6 0006.
  3. */
  4. public class MyAdapter extends BaseAdapter{
  5. private List<Data> mData;
  6. private Context mContext;
  7. public MyAdapter(List<Data> mData, Context mContext) {
  8. this.mData = mData;
  9. this.mContext = mContext;
  10. }
  11. @Override
  12. public int getCount() {
  13. return mData.size();
  14. }
  15. @Override
  16. public Object getItem(int position) {
  17. return null;
  18. }
  19. @Override
  20. public long getItemId(int position) {
  21. return position;
  22. }
  23. @Override
  24. public View getView(int position, View convertView, ViewGroup parent) {
  25. ViewHolder viewHolder;
  26. if(convertView == null){
  27. convertView = LayoutInflater.from(mContext).inflate(R.layout.list_item,parent,false);
  28. viewHolder = new ViewHolder();
  29. viewHolder.txt_item_title = (TextView) convertView.findViewById(R.id.txt_item_title);
  30. convertView.setTag(viewHolder);
  31. }else{
  32. viewHolder = (ViewHolder) convertView.getTag();
  33. }
  34. viewHolder.txt_item_title.setText(mData.get(position).getNew_title());
  35. return convertView;
  36. }
  37. private class ViewHolder{
  38. TextView txt_item_title;
  39. }
  40. }

Step 3:MainActivity的实现

MainActivity.java:

  1. public class MainActivity extends AppCompatActivity {
  2. private TextView txt_title;
  3. private FrameLayout fl_content;
  4. private Context mContext;
  5. private ArrayList<Data> datas = null;
  6. private FragmentManager fManager = null;
  7. private long exitTime = 0;
  8. @Override
  9. protected void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_main);
  12. mContext = MainActivity.this;
  13. fManager = getFragmentManager();
  14. bindViews();
  15. datas = new ArrayList<Data>();
  16. for (int i = 1; i <= 20; i++) {
  17. Data data = new Data("新闻标题" + i, i + "~新闻内容~~~~~~~~");
  18. datas.add(data);
  19. }
  20. NewListFragment nlFragment = new NewListFragment(fManager, datas);
  21. FragmentTransaction ft = fManager.beginTransaction();
  22. ft.replace(R.id.fl_content, nlFragment);
  23. ft.commit();
  24. }
  25. private void bindViews() {
  26. txt_title = (TextView) findViewById(R.id.txt_title);
  27. fl_content = (FrameLayout) findViewById(R.id.fl_content);
  28. }
  29. //点击回退键的处理:判断Fragment栈中是否有Fragment
  30. //没,双击退出程序,否则像是Toast提示
  31. //有,popbackstack弹出栈
  32. @Override
  33. public void onBackPressed() {
  34. if (fManager.getBackStackEntryCount() == 0) {
  35. if ((System.currentTimeMillis() - exitTime) > 2000) {
  36. Toast.makeText(getApplicationContext(), "再按一次退出程序",
  37. Toast.LENGTH_SHORT).show();
  38. exitTime = System.currentTimeMillis();
  39. } else {
  40. super.onBackPressed();
  41. }
  42. } else {
  43. fManager.popBackStack();
  44. txt_title.setText("新闻列表");
  45. }
  46. }
  47. }

Step 4:列表Fragment的实现:

NewListFragment.java

  1. package com.jay.fragmentdemo4;
  2. import android.app.Fragment;
  3. import android.app.FragmentManager;
  4. import android.app.FragmentTransaction;
  5. import android.os.Bundle;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.AdapterView;
  10. import android.widget.ListView;
  11. import android.widget.TextView;
  12. import java.util.ArrayList;
  13. /**
  14. * Created by Jay on 2015/9/6 0006.
  15. */
  16. public class NewListFragment extends Fragment implements AdapterView.OnItemClickListener {
  17. private FragmentManager fManager;
  18. private ArrayList<Data> datas;
  19. private ListView list_news;
  20. public NewListFragment(FragmentManager fManager, ArrayList<Data> datas) {
  21. this.fManager = fManager;
  22. this.datas = datas;
  23. }
  24. @Override
  25. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  26. View view = inflater.inflate(R.layout.fg_newlist, container, false);
  27. list_news = (ListView) view.findViewById(R.id.list_news);
  28. MyAdapter myAdapter = new MyAdapter(datas, getActivity());
  29. list_news.setAdapter(myAdapter);
  30. list_news.setOnItemClickListener(this);
  31. return view;
  32. }
  33. @Override
  34. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  35. FragmentTransaction fTransaction = fManager.beginTransaction();
  36. NewContentFragment ncFragment = new NewContentFragment();
  37. Bundle bd = new Bundle();
  38. bd.putString("content", datas.get(position).getNew_content());
  39. ncFragment.setArguments(bd);
  40. //获取Activity的控件
  41. TextView txt_title = (TextView) getActivity().findViewById(R.id.txt_title);
  42. txt_title.setText(datas.get(position).getNew_content());
  43. //加上Fragment替换动画
  44. fTransaction.setCustomAnimations(R.anim.fragment_slide_left_enter, R.anim.fragment_slide_left_exit);
  45. fTransaction.replace(R.id.fl_content, ncFragment);
  46. //调用addToBackStack将Fragment添加到栈中
  47. fTransaction.addToBackStack(null);
  48. fTransaction.commit();
  49. }
  50. }

Step 5:内容Fragment的实现:

NewContentFragment.java:

  1. /**
  2. * Created by Jay on 2015/9/6 0006.
  3. */
  4. public class NewContentFragment extends Fragment {
  5. NewContentFragment() {
  6. }
  7. @Override
  8. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  9. View view = inflater.inflate(R.layout.fg_content, container, false);
  10. TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
  11. //getArgument获取传递过来的Bundle对象
  12. txt_content.setText(getArguments().getString("content"));
  13. return view;
  14. }
  15. }

代码很简单,就不慢慢解释了~


3.代码下载

FragmentDemo5.ziphttp://pan.baidu.com/s/1mgF2lks


本节小结:

因为时间的关系,并没有详细的去做过多的讲解,示例代码也很简单,方便各位初学者理解!
如果要用到实际项目中还需要对此进行一番修改~!好的,本节就到这里,谢谢~

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注