Android Fragment 楚楚街商品列表效果 - Android 基础教程

Fragment 部分感觉已经没啥内容好讲的了，作为结束章，我们使用 Fragment 构建当下很流行的 列表页详情页 布局

从列表页点击某一项进入详情页然后返回列表页时位置还在

废话不多说，直接看效果图

这是一种典型的 Fragment 布局模式

创建一个空的 Android 项目 cn.twle.android.ShopFragment
在 res 目录下新建目录 anim，下载 /static/i/android/fragment_slide_anim.zip 解压并把 anim 下的所有的文件放到 res/anim 目录

在 res/layout 目录下新建 news_list_item.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/ms_txt_item_title"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:gravity="center_vertical"
        android:text="新闻标题"
        android:textColor="#000000"
        android:textSize="20sp" />

</LinearLayout>

在 res/layout 目录下添加 fg_news_list.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="horizontal">

    <ListView
        android:id="@+id/ms_list_news"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

在 res/layout 目录下添加 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/ms_txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textColor="#0099cc"
        android:textSize="20sp" />

</LinearLayout>

修改 activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <TextView
        android:id="@+id/ms_txt_title"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#0099cc"
        android:textColor="#ffffff"
        android:text="新闻列表"
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center"/>

    <FrameLayout
        android:id="@+id/ms_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ms_txt_title"/>

</RelativeLayout>

隐藏顶部导航栏

在 AndroidManifest.xml 设置下 theme 属性
```
android:theme="@style/Theme.AppCompat.NoActionBar"
```

在 MainActivity.java 目录下新建 DateBean.java

package cn.twle.android.shopfragment;

public class DataBean {

    private String new_title;
    private String new_content;

    public DataBean(){}

    public DataBean(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;
    }
}

在 MainActivity.java 目录下新建 MsAdapter.java

package cn.twle.android.shopfragment;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.List;

public class MsAdapter extends BaseAdapter{

    private List<DataBean> mData;
    private Context mContext;

    public MsAdapter(List<DataBean> 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.news_list_item,parent,false);
            viewHolder = new ViewHolder();
            viewHolder.ms_txt_item_title = (TextView) convertView.findViewById(R.id.ms_txt_item_title);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.ms_txt_item_title.setText(mData.get(position).getNew_title());
        return convertView;
    }

    private class ViewHolder{
        TextView ms_txt_item_title;
    }

}

在 MainActivity.java 目录下新建 MsNewContentFragment.java 作为内容 Fragment

package cn.twle.android.shopfragment;

import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MsNewContentFragment extends Fragment {

    @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.ms_txt_content);
        //getArgument获取传递过来的Bundle对象
        txt_content.setText(getArguments().getString("content"));
        return view;
    }

}

在 MainActivity.java 目录下新建 MsNewListFragment.java 作为列表 Fragment

package cn.twle.android.shopfragment;

import android.annotation.SuppressLint;
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;

@SuppressLint("ValidFragment")
public class MsNewListFragment extends Fragment implements AdapterView.OnItemClickListener {
    private FragmentManager fManager;
    private ArrayList<DataBean> datas;

    public MsNewListFragment(FragmentManager fManager, ArrayList<DataBean> datas) {
        this.fManager = fManager;
        this.datas = datas;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_news_list, container, false);
        ListView ms_list_news = (ListView) view.findViewById(R.id.ms_list_news);
        MsAdapter myAdapter = new MsAdapter(datas, getActivity());
        ms_list_news.setAdapter(myAdapter);
        ms_list_news.setOnItemClickListener(this);
        return view;
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        MsNewContentFragment ncFragment = new MsNewContentFragment();
        Bundle bd = new Bundle();
        bd.putString("content", datas.get(position).getNew_content());
        ncFragment.setArguments(bd);

        //获取 Activity 的控件
        TextView ms_txt_title = (TextView) getActivity().findViewById(R.id.ms_txt_title);
        ms_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.ms_content, ncFragment);
        //调用 addToBackStack() 将 Fragment 添加到栈中
        fTransaction.addToBackStack(null);
        fTransaction.commit();
    }
}

修改 MainActivity.java

package cn.twle.android.shopfragment;

import android.content.Context;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private TextView ms_txt_title;
    private FrameLayout ms_content;
    private Context mContext;
    private ArrayList<DataBean> 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<DataBean>();
        for (int i = 1; i <= 20; i++) {
            DataBean data = new DataBean("新闻标题" + i, i + "~新闻内容~~~~~~~~");
            datas.add(data);
        }
        MsNewListFragment nlFragment = new MsNewListFragment(fManager, datas);
        FragmentTransaction ft = fManager.beginTransaction();
        ft.replace(R.id.ms_content, nlFragment);
        ft.commit();
    }

    private void bindViews() {
        ms_txt_title = (TextView) findViewById(R.id.ms_txt_title);
        ms_content = (FrameLayout) findViewById(R.id.ms_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();
            ms_txt_title.setText("新闻列表");
        }
    }
}