ViewPager+Fragment+ListView打造新闻列表

来源:互联网 发布:淘宝c店直播运营 编辑:程序博客网 时间:2024/05/29 13:12

今天接触到了Fragment碎片,也是现在编写APP的主流道具。那么今天我用ViewPager、Fragment和ListView做了一个新闻列表,分享给大家。效果图里上方的指示器是用了第三方工具PagerSlidingTabStrip完成的,非常好用!省去了好多我之前写的监听事件。

首先,我们建一个Activity,然后在新建的Activity的layout中添加两个控件:

前者为第三方工具PagerSlidingTabStrip,后者V4包的ViewPager。

    <com.astuetz.PagerSlidingTabStrip        android:layout_width="match_parent"        android:layout_height="50dp"        android:id="@+id/pst">    </com.astuetz.PagerSlidingTabStrip>    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/vp">    </android.support.v4.view.ViewPager>

然后我们建一个空的Fragment。记住,建Fragment的时候先别勾选下面的两个对号,不然的话对于初学者显得有些乱。

这Fragment自带的layout中,我们放一个ListView控件。

    <ListView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/lv1">    </ListView>
因为咱是要做新闻列表嘛!当然少不了实体类,好,我们建一个新闻的实体类。

public class News implements Serializable{    private  String title;    private  String pubDate;    private  int   img;    private  int   img1;    private  int   img2;    private  int   img3;    public News(String title, String pubDate, int img, int img1, int img2, int img3) {        this.title = title;        this.pubDate = pubDate;        this.img = img;        this.img1 = img1;        this.img2 = img2;        this.img3 = img3;    }    public String getTitle() {        return title;    }    public void setTitle(String title) {        this.title = title;    }    public String getPubDate() {        return pubDate;    }    public void setPubDate(String pubDate) {        this.pubDate = pubDate;    }    public int getImg() {        return img;    }    public void setImg(int img) {        this.img = img;    }    public int getImg1() {        return img1;    }    public void setImg1(int img1) {        this.img1 = img1;    }    public int getImg2() {        return img2;    }    public void setImg2(int img2) {        this.img2 = img2;    }    public int getImg3() {        return img3;    }    public void setImg3(int img3) {        this.img3 = img3;    }}
因为新闻列表里的新闻是一条一条呈现在列表里面的,并且都有各自的样式,所以,我们再建一个layout来设计一下新闻的样式。list_simple_layout.xml,简单起见,里面只放了一个图片和一个文本。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_marginLeft="2dp"        android:layout_width="match_parent"        android:layout_height="80dp"        android:layout_weight="0.6"        android:scaleType="centerCrop"        android:src="@mipmap/ic_launcher"        android:id="@+id/iv" />    <TextView        android:layout_width="match_parent"        android:layout_height="80dp"        android:layout_weight="0.4"        android:id="@+id/tv"        android:gravity="center"        android:text="34134324124"/></LinearLayout>
大家也都用过新闻软件,你们会发现,在新闻列表中点了某一则新闻,它会跳转到一个新的界面,新的界面呈现的是有关这个新闻完整的信息。所以在这我们再弄一个用来跳转的Activity,并且在它的layout了搞一下布局,随你喜欢。我这里就先只用一个文本框做示例。

<TextView        android:layout_width="match_parent"        android:layout_height="<span style="font-family: Arial, Helvetica, sans-serif;">match_parent</span><span style="font-family: Arial, Helvetica, sans-serif;">"</span>        android:id="@+id/tv"        android:gravity="center"        android:textColor="#408fde"        android:textSize="30sp"/>

这里我们需要两个适配器,一个是FragmentViewPager的,一个是FragmentListView的。下面直接给出。

public class MyFragmentViewAdapter extends FragmentPagerAdapter {    private List<Fragment> list;    private List<String> title;    private Context context;    public MyFragmentViewAdapter(FragmentManager fm, List<Fragment> list,List<String> title) {        super(fm);        this.title = title;        this.list = list;    }    @Override    public Fragment getItem(int position) {        return list.get(position);    }    @Override    public int getCount() {        return list.size();    }    @Override    public CharSequence getPageTitle(int position) {        return title.get(position);    }}


public class MyListViewAdapter extends BaseAdapter {    private Context context;    private List<News> list;    public MyListViewAdapter(Context context, List<News> list) {        this.context = context;        this.list = list;    }    @Override    public int getCount() {        return list.size();    }    @Override    public Object getItem(int i) {        return list.get(i);    }    @Override    public long getItemId(int i) {        return 0;    }    @Override    public View getView(int i, View view, ViewGroup viewGroup) {        ViewHolder vh;        if(view==null){            vh = new ViewHolder();            view = LayoutInflater.from(context).inflate(R.layout.list_simple_layout,null);            vh.img = (ImageView) view.findViewById(R.id.iv);            vh.title = (TextView) view.findViewById(R.id.tv);            view.setTag(vh);        }else {            vh = (ViewHolder) view.getTag();        }        view.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(context, Main2Activity.class);                context.startActivity(intent);            }        });        vh.img.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Toast.makeText(context,"点击图片",Toast.LENGTH_SHORT).show();            }        });        News news = list.get(i);        vh.title.setText(news.getTitle());        vh.img.setImageResource(news.getImg());        return view;    }    public class ViewHolder{        TextView title;        ImageView img;    }}

好了,一切准备就绪,重头戏来了,就是我们如何用ViewPager、Fragment、ListView。我会在代码里加上注释进行说明。

首先,一开始的Activity。

public class ToDayNewsActivity extends AppCompatActivity {    //建两个全局变量,等下用它们获取layout里面的两个控件    private ViewPager vp;    private PagerSlidingTabStrip pst;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_to_day_news);        //这里我改了一下Toolbar的样式,和文章主题无关紧要        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        //用上面的两个全局变量find到控件        vp = (ViewPager) findViewById(R.id.vp);        pst = (PagerSlidingTabStrip) findViewById(R.id.pst);        //建一个List,泛型设为Fragment,用来存放Fragment        List<Fragment> list = new ArrayList<>();        //建一个存放字符串的List,这里是为了用第三方工具PagerSlidingTabStrip而弄的,因为要往里面穿一些参数。        //最后呈现的是上方的可点击指示器        List<String> title = new ArrayList<>();        title.add("体育");        title.add("娱乐");        title.add("奥运");        title.add("财经");        title.add("国际");        //来个循环,我这里弄了五次,建了5个ListViewFragment,并且往ListViewFragment里捆绑了一些整数,用于判断        //并区分多种新闻内容        for(int i = 1;i<=5;i++){            Fragment fragment = new ListViewFragment();            Bundle bundle = new Bundle();            bundle.putInt("arg",i);            fragment.setArguments(bundle);            list.add(fragment);        }        //将存放了Fragment的列表和指示器的参量加载到适配器中,然后将适配器变量加载到ViewPager中        //最后将ViewPager放到布局的PagerSlidingTabStrip第三方控件里        MyFragmentViewAdapter ma = new MyFragmentViewAdapter(getSupportFragmentManager(),list,title);        vp.setAdapter(ma);        pst.setViewPager(vp);    }}
</pre><strong><span style="font-size:18px; color:#996633">接下来是Fragment。</span></strong><p></p><p></p><pre name="code" class="java">public class ListViewFragment extends Fragment {    public ListViewFragment() {        // Required empty public constructor    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.fragment_list_view, container, false);    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        //这里建一个List用来存放News新闻类        final List<News> list = new ArrayList<>();        //创建了个ListView变量用来获取layout中的ListView        ListView lv1 = (ListView) getView().findViewById(R.id.lv1);        //建一个适配的变量,将上下文和list加载到ListVIew的适配器中,然后放到适配器变量里        MyListViewAdapter ma = new MyListViewAdapter(getActivity(),list);        //将适配器变量的内容加载到List里(也就是把那一堆新闻都放了进去)        lv1.setAdapter(ma);        //获取Activity里传过来的捆绑数据        Bundle bundle = getArguments();        //用来判断是那一中新闻        if(bundle != null){            int arg = bundle.getInt("arg");            switch (arg){                case 1:                    for(int i = 1;i<20;i++){                        list.add(new News("暴走大事件","刚刚",R.mipmap.mei02,                                R.mipmap.mei02,R.mipmap.mei02,R.mipmap.mei05));                    }                    ma.notifyDataSetChanged();                    break;                case 2:                    for(int i = 1;i<20;i++){                        list.add(new News("暴走大事件","刚刚",R.mipmap.mei02,                                R.mipmap.mei02,R.mipmap.mei02,R.mipmap.mei05));                    }                    ma.notifyDataSetChanged();                    break;                case 3:                    for(int i = 1;i<20;i++){                        list.add(new News("推理要在晚饭后","昨天",R.mipmap.mei02,                                R.mipmap.mei02,R.mipmap.mei02,R.mipmap.mei05));                    }                    ma.notifyDataSetChanged();                    break;                case 4:                    for(int i = 1;i<20;i++){                        list.add(new News("嘿嘿嘿~","晚上",R.mipmap.mei02,                                R.mipmap.mei02,R.mipmap.mei02,R.mipmap.mei05));                    }                    ma.notifyDataSetChanged();                    break;                case 5:                    for(int i = 1;i<20;i++){                        list.add(new News("- -、守望","凌晨2点",R.mipmap.mei02,                                R.mipmap.mei02,R.mipmap.mei02,R.mipmap.mei05));                    }                    ma.notifyDataSetChanged();                    break;                default:break;            }        }                //这里用到了监听事件,目的是点击新闻列表中的新闻后跳转到完整的新闻界面        lv1.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {                News news = list.get(i);                Toast.makeText(getActivity(),news.getTitle(),Toast.LENGTH_SHORT).show();                Intent intent = new Intent(getActivity(), IntentActivity.class);                intent.putExtra("obj",news);                Bundle bundle1 = new Bundle();                bundle1.putString("arg1","新闻详情");                intent.putExtra("bundle",bundle1);                startActivity(intent);            }        });    }}

最后是跳转的Activiry的代码。

public class IntentActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_intent);        TextView tv = (TextView) findViewById(R.id.tv);        ImageView iv = (ImageView) findViewById(R.id.iv);        Intent intent = getIntent();        News news = (News) intent.getSerializableExtra("obj");        Bundle bundle = intent.getBundleExtra("bundle");        String arg = bundle.getString("arg1");        StringBuilder sbld = new StringBuilder();        sbld.append(arg+"\n");        sbld.append(news.getTitle()+"\n");        sbld.append(news.getPubDate()+"\n");        tv.setText(sbld.toString());        iv.setImageResource(news.getImg());    }}
大功告成!
预览图如下:


1 0
原创粉丝点击