5.2.5 Fragment实例精讲——新闻(购物)类App列表Fragment的简单实现

本节引言：

相信大家对点击列表，然后进入详情这种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:

fg_context.xml:

activity_main.xml:

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

Data.ja va:

/**
 * 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.ja va:

/**
 * Created by Jay on 2015/9/6 0006.
 */
public class MyAdapter extends BaseAdapter{
private List mData;
    private Context mContext;
public MyAdapter(List 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的实现

MainActivity.ja va:

public class MainActivity extends AppCompatActivity {
private TextView txt_title;
    private FrameLayout fl_content;
    private Context mContext;
    private ArrayList datas = null;
    private FragmentManager fManager = null;
    private long exitTime = 0;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        fManager = getFragmentManager();
        bindViews();
datas = new ArrayList();
        for (int i = 1; i <= 20; i++) {
            Data data = new Data("新闻标题" + i, 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);
    }
//点击回退键的处理：判断Fragment栈中是否有Fragment
    //没，双击退出程序，否则像是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的实现：

NewListFragment.ja va：

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 ja va.util.ArrayList;
/**
 * Created by Jay on 2015/9/6 0006.
 */
public class NewListFragment extends Fragment implements AdapterView.OnItemClickListener {
    private FragmentManager fManager;
    private ArrayList datas;
    private ListView list_news;
public NewListFragment(FragmentManager fManager, ArrayList datas) {
        this.fManager = fManager;
        this.datas = datas;
    }
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa vedInstanceState) {
        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替换动画
        fTransaction.setCustomAnimations(R.anim.fragment_slide_left_enter, R.anim.fragment_slide_left_exit);
        fTransaction.replace(R.id.fl_content, ncFragment);
        //调用addToBackStack将Fragment添加到栈中
        fTransaction.addToBackStack(null);
        fTransaction.commit();
    }
}

Step 5:内容Fragment的实现：

NewContentFragment.ja va:

/**
 * Created by Jay on 2015/9/6 0006.
 */
public class NewContentFragment extends Fragment {
NewContentFragment() {
    }
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa vedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
        //getArgument获取传递过来的Bundle对象
        txt_content.setText(getArguments().getString("content"));
        return view;
    }
}

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

3.代码下载

FragmentDemo5.zip：下载 FragmentDemo5.zip

本节小结：

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