通过ViewPager和Fragment的组合搭配,可以很好的实现类似于今日头条的UI。并且由于ViewPager的强大属性,Fragment中如果包含ListView,也不会出现滑动冲突。
四个类文件,逐个分析:
MainActivity.java :主Activity,负责加载主界面,装载Fragment数据,Title数据
ItemFragment.java :加载单个Fragment界面,并装载ListView的数据
FragmentViewPagerAdapter :Frgment的适配器
FragmentListAdapter : ListView的适配器
要点:需要导入一个PagerSlidingTabStrip的库。该库完美的实现了Tab的标签页和标签下的指示标志。
上代码:
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/title_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#FF3030">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="头条新闻"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</RelativeLayout>
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_below="@+id/title_bar"></com.astuetz.PagerSlidingTabStrip>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tab_bar"></android.support.v4.view.ViewPager>
</RelativeLayout>
MainActivity.java :
package com.example.ubuntu.myapplication;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.astuetz.PagerSlidingTabStrip;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
ViewPager mViewPager;
PagerSlidingTabStrip mPagerSlidingTabStrip;
List<Fragment> mFragmentList;
List<String> mTitleList;
String [] titles = null;
FragmentViewPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.tab_bar);
mFragmentList = new ArrayList<>();
mTitleList = new ArrayList<>();
titles = getResources().getStringArray(R.array.title_bar);
for (int i = 0; i < titles.length; i ++){
mTitleList.add(titles[i]);
}
for (int i = 1; i <= titles.length; i++){
Fragment fragment=new ItemFragment();
Bundle bundle=new Bundle();
bundle.putInt("arg",i);
fragment.setArguments(bundle);
mFragmentList.add(fragment);
}
adapter = new FragmentViewPagerAdapter(
getSupportFragmentManager(),mFragmentList,mTitleList);
mViewPager.setAdapter(adapter);
mPagerSlidingTabStrip.setIndicatorColor(getColor(R.color.colorPrimary));
mPagerSlidingTabStrip.setIndicatorHeight(5);
mPagerSlidingTabStrip.setAllCaps(true);
mPagerSlidingTabStrip.setShouldExpand(true);
mPagerSlidingTabStrip.setTextSize(40);
mPagerSlidingTabStrip.setTextColor(getColor(R.color.colorPrimaryDark));
mPagerSlidingTabStrip.setViewPager(mViewPager);
}
}
ItemFragment.java :
package com.example.ubuntu.myapplication;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class ItemFragment extends Fragment {
String [] newsTitles = null;
List<Map<String,Object>> list;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_content_layout,container,false);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
ListView listView = (ListView) getView().findViewById(R.id.listView);
newsTitles = getResources().getStringArray(R.array.news_title);
list = new ArrayList<>();
for (int i = 0; i < newsTitles.length; i ++){
Map<String,Object> map = new HashMap<>();
map.put("title",newsTitles[i]);
map.put("image",R.mipmap.ic_launcher);
list.add(map);
}
FragmentListAdapter adapter = new FragmentListAdapter(list,getContext());
listView.setAdapter(adapter);
}
}
FragmentListAdapter.java :
package com.example.ubuntu.myapplication;
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 java.util.List;
import java.util.Map;
public class FragmentListAdapter extends BaseAdapter {
Context context;
List<Map<String,Object>> data;
public FragmentListAdapter(List<Map<String,Object>> data,Context context){
this.data = data;
this.context = context;
}
@Override
public int getCount() {
return data.size();
}
@Override
public Object getItem(int position) {
return data.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder ;
if (convertView == null){
convertView = LayoutInflater.from(context).inflate(R.layout.list_item_layout,null);
holder = new ViewHolder();
holder.title = (TextView) convertView.findViewById(R.id.title);
holder.image = (ImageView) convertView.findViewById(R.id.image);
convertView.setTag(holder);
}else {
holder = (ViewHolder) convertView.getTag();
}
holder.image.setImageResource((Integer) data.get(position).get("image"));
holder.title.setText((String) data.get(position).get("title"));
return convertView;
}
class ViewHolder{
private TextView title;
private ImageView image;
}
}
FragmentViewPagerAdapter.java :
package com.example.ubuntu.myapplication;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
public class FragmentViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> list;
private List<String> title;
public FragmentViewPagerAdapter(FragmentManager fm, List<Fragment> mFragmentList, List<String> mTitleList) {
super(fm);
this.list = mFragmentList;
this.title = mTitleList;
}
@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);
}
}
OK,代码基本贴完,就剩一些res资源文件。可以根据效果图自行完成哦 ! 好了,收工