先来看效果图：

该项目中需要使用到VIewPager+Fragment，导航Tab栏，ListView，以及scrollview。

一、首先，MainActivity.java中搭建框架，添加Tab栏：

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {private ViewPager mViewPager;private FragmentPagerAdapter mAdapter;private List<GradientIconView> mTabIconIndicator = new ArrayList<GradientIconView>();private List<GradientTextView> mTabTextIndicator = new ArrayList<GradientTextView>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mViewPager = (ViewPager) findViewById(R.id.container);//适配器mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic int getCount() {return 3;}/*打开相应Fragment*/@Overridepublic Fragment getItem(int position) {switch (position) {case 0:return new HomeFragment();case 1:return new DingdanFragment();case 2:return new MeFragment();}return null;}};initTabIndicator(); //设置底部tabmViewPager.setAdapter(mAdapter);mViewPager.setOnPageChangeListener(this);}/*初始化tab相关项*/private void initTabIndicator() {//icon项GradientIconView iconHome = (GradientIconView) findViewById(R.id.id_icon_home);GradientIconView iconDingdan = (GradientIconView) findViewById(R.id.id_icon_dingdan);GradientIconView iconMe = (GradientIconView) findViewById(R.id.id_icon_me);//字符项GradientTextView textHome = (GradientTextView) findViewById(R.id.id_text_home);GradientTextView textDingdan = (GradientTextView) findViewById(R.id.id_text_dingdan);GradientTextView textMe = (GradientTextView) findViewById(R.id.id_text_me);mTabIconIndicator.add(iconHome);mTabIconIndicator.add(iconDingdan);mTabIconIndicator.add(iconMe);mTabTextIndicator.add(textHome);mTabTextIndicator.add(textDingdan);mTabTextIndicator.add(textMe);iconHome.setOnClickListener(this);iconDingdan.setOnClickListener(this);iconMe.setOnClickListener(this);textHome.setOnClickListener(this);textDingdan.setOnClickListener(this);textMe.setOnClickListener(this);iconHome.setIconAlpha(1.0f);textHome.setTextViewAlpha(1.0f);}@Overridepublic void onClick(View v) {resetOtherTabs();switch (v.getId()) {case R.id.id_icon_home:case R.id.id_text_home:mTabIconIndicator.get(0).setIconAlpha(1.0f);mTabTextIndicator.get(0).setTextViewAlpha(1.0f);mViewPager.setCurrentItem(0, false);break;case R.id.id_icon_dingdan:case R.id.id_text_dingdan:mTabIconIndicator.get(1).setIconAlpha(1.0f);mTabTextIndicator.get(1).setTextViewAlpha(1.0f);mViewPager.setCurrentItem(1, false);break;case R.id.id_icon_me:case R.id.id_text_me:mTabIconIndicator.get(2).setIconAlpha(1.0f);mTabTextIndicator.get(2).setTextViewAlpha(1.0f);mViewPager.setCurrentItem(2, false);break;}}/*** 重置其他的Tab*/private void resetOtherTabs() {for (int i = 0; i < mTabIconIndicator.size(); i++) {mTabIconIndicator.get(i).setIconAlpha(0);}for (int i = 0; i < mTabTextIndicator.size(); i++) {mTabTextIndicator.get(i).setTextViewAlpha(0);}}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {if (positionOffset > 0) {GradientIconView iconLeft = mTabIconIndicator.get(position);GradientIconView iconRight = mTabIconIndicator.get(position + 1);GradientTextView textLeft = mTabTextIndicator.get(position);GradientTextView textRight = mTabTextIndicator.get(position + 1);iconLeft.setIconAlpha(1 - positionOffset);textLeft.setTextViewAlpha(1 - positionOffset);iconRight.setIconAlpha(positionOffset);textRight.setTextViewAlpha(positionOffset);}}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}}

这里是通过GradientIconView 和 GradientTextView 分别对底部导航Tab中的icon图片和textview字符分开进行了设置，达到界面切换时的渐变效果。

总共3个fragment，首页--HomeFragment()，订单--DingdanFragment()，我的--MeFragment()。

二、HomeFragment.java

首页界面由两部分组成：上部分的按钮和“全部商家”文字，以及下部分的商家详细信息列表。 那么布局文件也将它们分为两个，一个是GridView（也可以用TableLayout）+TextView，一个则存放ListView。为了能够一起跟随ListView滑动，使用listView.addHeaderView() 方法。

/*** 首页界面*/public class HomeFragment extends Fragment {private GridView gridView;private ListView listView;private List<ShangjiaList> shangjiaLists;private LayoutInflater layoutInflater;private MyAdapter myAdapter;private SimpleAdapter simpleAdapter;private View viewGrid;private List<Map<String,Object>> grid_data;private int[] grid_icon = new int[] {R.drawable.item1,R.drawable.item2,R.drawable.item3,R.drawable.item4,R.drawable.item5,R.drawable.item6,R.drawable.item7,R.drawable.item8};private String[] grid_text= new String[]{"餐饮","超市购","水果生鲜","下午茶","土豪特供","新店","百度配送","火锅"};@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View rootView = inflater.inflate(R.layout.fragment_home, container, false);layoutInflater = LayoutInflater.from(getActivity());initGridView();//GridView适配器simpleAdapter = new SimpleAdapter(getActivity(),grid_data,R.layout.grid_cell_home,new String[]{"image","text"},new int[]{R.id.ivGrid,R.id.tvGrid});gridView.setAdapter(simpleAdapter);listView = (ListView) rootView.findViewById(R.id.lvHome);// initAddHeader();//其他视图与listView绑定滑动listView.addHeaderView(viewGrid);initListView();//适配器设置myAdapter = new MyAdapter(getActivity(), shangjiaLists);listView.setAdapter(myAdapter);return rootView;}private void initGridView() {//GridView初始化viewGrid = layoutInflater.inflate(R.layout.home_heah_view,null);gridView = (GridView) viewGrid.findViewById(R.id.gridView);grid_data = new ArrayList<Map<String,Object>>();for (int i = 0; i < grid_icon.length;++i) {Map<String,Object> map = new HashMap<String,Object>();map.put("image",grid_icon[i]);map.put("text",grid_text[i]);grid_data.add(map);}}/*listView中添加的项*/private void initListView() {shangjiaLists = new ArrayList<ShangjiaList>();shangjiaLists.add(new ShangjiaList(R.drawable.home_image_1, 1, "汉堡王（新街口一店）", "券", "票", "付", "赔", 4.7, "1378", "990m", "30", "5", "35", "", ""));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_2, 1, "必胜客欢乐餐厅（金...", "", "", "付", "赔", 4.2, "221", "1.0km", "20", "12", "41", "", ""));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_3, 0, "七德好美食城", "券", "票", "", "", 4.5, "846", "500m", "30", "5", "35", "", ""));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_4, 1, "黄焖鸡米饭（青岛路店）", "券", "票", "", "赔", 4.6, "1418", "1.2m", "20", "0", "50", "满30减15元，满50减23元（在线支付专享）", "使用百度钱包多减2元"));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_5, 1, "老徽州咸肉菜饭骨头汤（中...", "券", "票", "付", "赔", 4.1, "2842", "1.8km", "20", "1", "60", "满30减15元，满50减23元（在线支付专享）", ""));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_6, 1, "德克士（百老汇店）", "券", "票", "付", "赔", 4.7, "611", "900m", "20", "5", "35", "", "使用百度钱包多减2元"));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_7, 0, "大牌小厨（新街口店）", "券", "票", "付", "赔", 4.5, "944", "620m", "20", "8", "35", "满30减15元，满50减23元（在线支付专享）", ""));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_8, 0, "津津咖喱（金轮店）", "券", "票", "付", "赔", 4.2, "855", "1.8km", "25", "5", "35", "", ""));shangjiaLists.add(new ShangjiaList(R.drawable.home_image_9, 1, "和风便当（珠江路）", "券", "票", "付", "赔", 4.8, "695", "800m", "30", "5", "35", "满30减15元，满50减23元（在线支付专享）", "使用百度钱包多减2元"));}}

而ListView可以看到，每个项排布不是完全相同的，所以这里使用自定义适配器MyAdapter.java，

public class MyAdapter extends BaseAdapter {private List<ShangjiaList> shangjiaLists;private LayoutInflater mInflater;public MyAdapter(Context context, List<ShangjiaList> shangjiaLists) {mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);this.shangjiaLists = shangjiaLists;}@Overridepublic int getCount() {return (shangjiaLists == null) ? 0 : shangjiaLists.size();}@Overridepublic Object getItem(int position) {return shangjiaLists.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic int getViewTypeCount() {return super.getViewTypeCount();}@Overridepublic int getItemViewType(int position) {return super.getItemViewType(position);}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {final ShangjiaList shangjiaList = (ShangjiaList) getItem(position);ViewHolder holder = null;if (convertView == null) {holder = new ViewHolder();convertView = mInflater.inflate(R.layout.list_cell_home, null);holder.ivShangjia = (ImageView) convertView.findViewById(R.id.ivShangjia);holder.ivBaiduPeisong = (ImageView) convertView.findViewById(R.id.ivBaiduPeisong);holder.tvName = (TextView) convertView.findViewById(R.id.tvName);holder.tvQuan = (TextView) convertView.findViewById(R.id.tvQuan);holder.tvPiao = (TextView) convertView.findViewById(R.id.tvPiao);holder.tvFu = (TextView) convertView.findViewById(R.id.tvFu);holder.tvPei = (TextView) convertView.findViewById(R.id.tvPei);holder.ratingBar = (RatingBar) convertView.findViewById(R.id.ratingBar);holder.tvYishou = (TextView) convertView.findViewById(R.id.tvYishou);holder.tvDistance = (TextView) convertView.findViewById(R.id.tvDistance);holder.tvQisong = (TextView) convertView.findViewById(R.id.tvQisong);holder.tvPeisong = (TextView) convertView.findViewById(R.id.tvPeisong);holder.tvTime = (TextView) convertView.findViewById(R.id.tvTime);holder.tvJian_1 = (TextView) convertView.findViewById(R.id.tvJian_1);holder.tvJian_2 = (TextView) convertView.findViewById(R.id.tvJian_2);holder.list_layoutHome_3 = convertView.findViewById(R.id.list_layoutHome_3);holder.list_itemHome_1 = convertView.findViewById(R.id.list_itemHome_1);holder.list_itemHome_2 = convertView.findViewById(R.id.list_itemHome_2);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}//设置输入内容holder.ivShangjia.setImageResource(shangjiaList.id_ivShangjia);holder.tvName.setText(shangjiaList.name);holder.tvQuan.setText(shangjiaList.quan);holder.tvPiao.setText(shangjiaList.piao);holder.tvFu.setText(shangjiaList.fu);holder.tvPei.setText(shangjiaList.pei);holder.ratingBar.setRating((Float) shangjiaList.ratingBarData);holder.tvYishou.setText("已售" + shangjiaList.yishou + "份");holder.tvDistance.setText(shangjiaList.distance);holder.tvQisong.setText("起送￥" + shangjiaList.qisong);holder.tvPeisong.setText("配送￥" + shangjiaList.peisong);holder.tvTime.setText("平均" + shangjiaList.time + "分钟");holder.tvJian_1.setText(shangjiaList.jian_1);holder.tvJian_2.setText(shangjiaList.jian_2);//内容排布显示设置if (holder.tvQuan.getText() == "")holder.tvQuan.setVisibility(View.GONE);if (holder.tvPiao.getText() == "")holder.tvPiao.setVisibility(View.GONE);if (holder.tvFu.getText() == "")holder.tvFu.setVisibility(View.GONE);if (holder.tvPei.getText() == "")holder.tvPei.setVisibility(View.GONE);if (holder.tvJian_1.getText() == "" && holder.tvJian_1.getText() == "") {holder.list_layoutHome_3.setVisibility(View.GONE);} else if (holder.tvJian_1.getText() == "") {holder.list_itemHome_1.setVisibility(View.GONE);} else if (holder.tvJian_2.getText() == "") {holder.list_itemHome_2.setVisibility(View.GONE);}if (shangjiaList.ivBaiduPeisong_show == 0) {holder.ivBaiduPeisong.setVisibility(View.GONE);}return convertView;}/*避免重复生成,提高ListView效率*/class ViewHolder {ImageView ivShangjia;ImageView ivBaiduPeisong;TextView tvName;TextView tvQuan, tvPiao, tvFu, tvPei;RatingBar ratingBar;TextView tvYishou, tvDistance;TextView tvQisong, tvPeisong, tvTime;TextView tvJian_1, tvJian_2;View list_layoutHome_3;View list_itemHome_1, list_itemHome_2;}}

三、DingdanFragment.java

订单界面，这个界面很简单，只需要布局文件排布一下即可。

四、MeFragment.java

我的界面，要想实现界面效果，这里使用ScrollView来达到可以上下滑动的功能（其实另外也可以像HomeFragment中一样，使用ListView） 。

/*** 我的界面*/public class MeFragment extends Fragment {private LayoutInflater layoutInflater;private LinearLayout layout;private String[] texts = new String[]{"我的送餐地址", "我的代金券", "我的退款", "我的消息", "我的收藏","我的评论", "百度钱包", "百度糯米", "常见问题"};private int[] images = new int[]{R.drawable.me_image_1, R.drawable.me_image_2, R.drawable.me_image_3,R.drawable.me_image_4, R.drawable.me_image_5, R.drawable.me_image_6, R.drawable.me_image_7,R.drawable.me_image_8, R.drawable.me_image_9};@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View rootView = inflater.inflate(R.layout.fragment_me, container, false);layoutInflater = LayoutInflater.from(getActivity());//使用ScrollView排布界面layout = (LinearLayout) rootView.findViewById(R.id.id_linearLayout);initView();//设置ScrollViewreturn rootView;}/*设置ScrollView*逐行添加条目*/public void initView() {for (int i = 0; i < images.length; i++) {View view = layoutInflater.inflate(R.layout.list_cell_me, layout, false);ImageView ivMe1 = (ImageView) view.findViewById(R.id.ivMe1);ivMe1.setImageResource(images[i]);TextView tvMe = (TextView) view.findViewById(R.id.tvMe);tvMe.setText(texts[i]);ImageView ivMe2 = (ImageView) view.findViewById(R.id.ivMe2);ivMe2.setImageResource(R.drawable.wallet_base_right_arrow);layout.addView(view);//添加横隔条（间距）if (i == 2 || i == 5 || i == 7 || i == 8) {View view2 = layoutInflater.inflate(R.layout.list_cell_me_2, layout, false);layout.addView(view2);}}View view3 = layoutInflater.inflate(R.layout.list_cell_me_3, layout, false);layout.addView(view3);}}

具体代码下载

如果觉得《【Android开发小记--2】百度外卖 UI界面》对你有帮助，请点赞、收藏，并留下你的观点哦！