Android Fragment 楚楚街商品列表效果

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

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

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


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

  1. 创建一个 空的 Android 项目 cn.twle.android.ShopFragment

  2. res 目录下新建目录 anim,下载 /static/i/android/fragment_slide_anim.zip 解压并把 anim 下的所有的文件放到 res/anim 目录

  3. 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>
    
  4. 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>
    
  5. 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>
    
  6. 修改 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>
    
  7. 隐藏顶部导航栏

    AndroidManifest.xml 设置下 theme 属性

    android:theme="@style/Theme.AppCompat.NoActionBar"
    
  8. 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;
        }
    }
    
  9. 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;
        }
    
    }
    
  10. 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;
        }
    
    }
    
  11. 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();
        }
    }
    
  12. 修改 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("新闻列表");
            }
        }
    }
    

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.