使用ListView、ViewPager、scrollView编写今日头条界面

使用Android中ListView、ViewPager、scrollView控件编写今日头条界面

在编写代码的时候，我们应该有一个具体的思路。首先，今日头条上方是一个红色背景框，里面有两个小图片和今日头条的文本 三个小控件，在背景框下方有一个可以拖动的按钮组成的控件，我们可以使用RadioGroup添加到scrollView滑动组件里。其次，今日头条的主文本区内是类似ListView的列表框，并且在点击按钮时可以更换主文本区内的内容，这时可以用ViewPager实现每一个按钮下的主文本区的显示，并且可以左右滑动。因此，将ListView控件添加到ViewPager里面，就可以达到预期目标。

我们首先看一个今日头条的主界面：



代码部分：

1.主程序：(需要注意的是本代码使用的ListView是通过布局得到的，并且ListView布局里只包含一个ListView组件)

<pre name="code" class="java">import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.jokerloveallen.topnews.adapter.MyListMultAdapter;
import com.jokerloveallen.topnews.adapter.MyViewPagerAdapter;
import com.jokerloveallen.topnews.entity.News;

import java.util.ArrayList;
import java.util.List;
// 本项目是将ListView 放在viewPager里面实现翻页需关联ListView适配器,和ViewPager的扩展适配器。
public class MainActivity extends AppCompatActivity {
private RadioGroup radioGroup;
private HorizontalScrollView scrollView;
private ViewPager vp;
private List<ListView> myData;//存放ListView的集合
private String[] channel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

this.requestWindowFeature(Window.FEATURE_NO_TITLE);
//全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
//隐藏Action_Bar
getSupportActionBar().hide();
setContentView(R.layout.scroll_list_layout);

channel= new String[]{"推荐", "烟台", "要闻", "热点", "视频", "财经", "健康", "科技", "书籍", "游戏", "生活", "国际"};
vp = (ViewPager) findViewById(R.id.vp);
radioGroup = (RadioGroup) findViewById(R.id.radio);
scrollView =(HorizontalScrollView)findViewById(R.id.sv);
//        channel = new String[]{};

initRadioButton();
myData = new ArrayList<>();
initListView();
vp.setAdapter(new MyViewPagerAdapter(myData));

vp.addOnPageChangeListener(new myOnPageChangeListener());//滑动图片监听
radioGroup.setOnCheckedChangeListener(new myOnCheckedChangeListener());//选择监听

//init();   //创建ListView的方法有兩種方式。

}

//RadioGroup的内部类监听
public class myOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener{
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
vp.setCurrentItem(checkedId);
}
}

//ViewPager页面滑动的内部类监听
public class myOnPageChangeListener implements ViewPager.OnPageChangeListener{

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
RadioButton radioButton = (RadioButton)radioGroup.getChildAt(position);
radioButton.requestFocus();
radioButton.setChecked(true);
if(position == 5){
scrollView.scrollTo(9005,0);//滑动到的坐标
} else if (position == 4){
scrollView.scrollTo(0,0);
}

}

@Override
public void onPageScrollStateChanged(int state) {

}
}

//为每一个RadioButton设定文本，并设置标号（ID）
public void initRadioButton(){
for (int i=0;i<channel.length;i++){
RadioButton rb = (RadioButton)getLayoutInflater().
inflate(R.layout.radiobutton_layout,null);
rb.setText(channel[i]);
rb.setId(i);
LinearLayout.LayoutParams ll = new LinearLayout.LayoutParams
(150, ViewGroup.LayoutParams.MATCH_PARENT);
ll.setMargins(10,0,0,0);
if (i==0){
rb.setChecked(true);
}
//将RadioButton添加到RadioGroup里面
radioGroup.addView(rb,ll);
}
}
 

//添加新闻类到每一条ListView，并为ListView关联对应的适配器，放到存放ListView的集合中
public void initListView(){

for (int j=0;j<channel.length;j++) {
ListView listView= new ListView(this);
List newsList = new ArrayList();
for (int i = 0; i < 10; i+=2) {
newsList.add(new News("1小时前", "评论", "腾讯娱乐",
"THIS IS A TEST",
R.mipmap.car1, R.mipmap.ic_launcher, "550"));
newsList.add(new News("2小时前", "评论", "CSDN论坛",
"THIS IS A TEST",
R.mipmap.car2, 0, "720"));
}
listView.setAdapter(new MyListMultAdapter(newsList, this));
myData.add(listView);
}
}
}

2.ViewPager适配器

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

import java.util.List;

public class  MyViewPagerAdapter extends PagerAdapter {
private List<ListView> ListViewList;

public MyViewPagerAdapter(List<ListView> ListViewViewList) {
this.ListViewList = ListViewViewList;
}

@Override
public int getCount() {
return ListViewList.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(ListViewList.get(position));//为ViewGroup添加List内的图片
return ListViewList.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(ListViewList.get(position));
}
}

3.自定义ListView适配器(需要一个自定义一个新闻类)

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

import com.jokerloveallen.topnews.R;
import com.jokerloveallen.topnews.entity.News;

import java.util.List;

public class MyListMultAdapter extends BaseAdapter {
private List<News> list;
private Context context;
private final int TYPE1 = 0;
private final int TYPE2 = 1;

public MyListMultAdapter(List<News> list, Context context) {
this.list = list;
this.context = context;
}

@Override
public int getCount() {
return list.size();
}

@Override
public Object getItem(int position) {
return list.get(position);
}

@Override
public long getItemId(int position) {
return 0;
}

@Override
public int getItemViewType(int position) {
if (list.get(position).getFlag() == 0){

return TYPE1;
} else {

return TYPE2;
}
}

@Override
public int getViewTypeCount() {
return 2;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
final ViewHolder vh;
int type = getItemViewType(position);
if (convertView == null){
vh = new ViewHolder();
if (type == 0){ //布局一
convertView = LayoutInflater.from(context)
.inflate(R.layout.list_baseadapter1_layout,null);
vh.title = (TextView)convertView.findViewById(R.id.title1);
vh.from =   (TextView)convertView.findViewById(R.id.from1);
vh.pubDate = (TextView)convertView.findViewById(R.id.pubDate1);
vh.talk = (TextView)convertView.findViewById(R.id.talk1);
vh.talkCount = (TextView)convertView.findViewById(R.id.talkCount1);
vh.img = (ImageView)convertView.findViewById(R.id.img1);
vh.flag = (ImageView)convertView.findViewById(R.id.flag1);
convertView.setTag(vh);
} else { //布局二
convertView = LayoutInflater.from(context)
.inflate(R.layout.list_baseadapter2_layout,null);
vh.title = (TextView)convertView.findViewById(R.id.title2);
vh.from =   (TextView)convertView.findViewById(R.id.from2);
vh.pubDate = (TextView)convertView.findViewById(R.id.pubDate2);
vh.talk = (TextView)convertView.findViewById(R.id.talk2);
vh.talkCount = (TextView)convertView.findViewById(R.id.talkCount2);
vh.img = (ImageView)convertView.findViewById(R.id.img2);
vh.flag = (ImageView)convertView.findViewById(R.id.flag2);

convertView.setTag(vh);
}
} else {
vh = (ViewHolder) convertView.getTag();
}
News news = list.get(position);
if (type == 0){
vh.title.setText(news.getTitle());
vh.talk.setText(news.getTalk());
vh.talkCount.setText(news.getTalkCount());
vh.pubDate.setText(news.getPubDate());
vh.from.setText(news.getFrom());
vh.img.setImageResource(news.getImg());
vh.flag.setImageResource(news.getFlag());
} else {
vh.title.setText(news.getTitle());
vh.talk.setText(news.getTalk());
vh.talkCount.setText(news.getTalkCount());
vh.pubDate.setText(news.getPubDate());
vh.from.setText(news.getFrom());
vh.img.setImageResource(news.getImg());
vh.flag.setImageResource(news.getFlag());
}

return convertView;
}
private class ViewHolder{
TextView pubDate;
TextView talk;
TextView from;
TextView title;
TextView talkCount;
ImageView img,flag;
}
}
截图：

初次编写，如有不合适地方，请多包涵！