【Android开发小记--2】百度外卖 UI界面

先来看效果图：

该项目中需要使用到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>();
    @Override
    protected 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()) {
            @Override
            public int getCount() {
                return 3;
            }
            /*打开相应Fragment*/
            @Override
            public Fragment getItem(int position) {
                switch (position) {
                    case 0:
                        return new HomeFragment();
                    case 1:
                        return new DingdanFragment();
                    case 2:
                        return new MeFragment();
                }
                return null;
            }
        };
        initTabIndicator(); //设置底部tab
        mViewPager.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);
    }
    @Override
    public 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);
        }
    }
    @Override
    public 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);
        }
    }
    @Override
    public void onPageSelected(int position) {
    }
    @Override
    public 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[]{"餐饮","超市购","水果生鲜","下午茶","土豪特供","新店","百度配送","火锅"};
    @Override
    public 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;
    }
    @Override
    public int getCount() {
        return (shangjiaLists == null) ? 0 : shangjiaLists.size();
    }
    @Override
    public Object getItem(int position) {
        return shangjiaLists.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public int getViewTypeCount() {
        return super.getViewTypeCount();
    }
    @Override
    public int getItemViewType(int position) {
        return super.getItemViewType(position);
    }
    @Override
    public 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};
    @Override
    public 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();//设置ScrollView
        return 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);
    }
}

具体代码下载