Android 通过CoordinatorLayout简单实现360软件详情页面

相信大家在日常开发过程中有遇到过类似的需求，ViewPager+Header ,ViewPager里面有ListView或者ScrollerView，这个界面如果我们自己来实现的话，需要处理各种手势冲突，还是挺麻烦的，之前看过鸿洋大大写过一篇解决这个问题的博文，Android 自定义控件 轻松实现360软件详情页 ，本篇文章说的是如何通过系统控件实现这个效果。

360软件详情页

这里使用的系统控件是 CoordinatorLayout、 AppBarLayout、ViewPager、PagerTabStrip。

MainActivity

package com.sundroid.coordinator.view;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager view_pager;
    private List titles = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view_pager = (ViewPager) findViewById(R.id.view_pager);
        titles.add("简介");
        titles.add("评价");
        titles.add("相关");
        List fragments = new ArrayList<>();
        fragments.add(ListFragment.newInstance());
        fragments.add(ListFragment.newInstance());
        fragments.add(ListFragment.newInstance());

        ViewPagerAdapter mAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments);
        view_pager.setAdapter(mAdapter);
    }

    private class ViewPagerAdapter extends FragmentPagerAdapter {

        private List fragments = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager fm, List fragments) {
            super(fm);
            this.fragments = fragments;
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;
    }
}

ListFragment

package com.sundroid.coordinator.view;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by sundroid on 16/05/2017.
 */

public class ListFragment extends Fragment {
    private View mRootView;
    private ListView listview;

    private String[] name = {"Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World",
            "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World",
            "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World",
            "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World",
            "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World", "Hello World"};


    static ListFragment newInstance() {
        ListFragment f = new ListFragment();
        return f;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (mRootView == null) {
            mRootView = inflater.inflate(R.layout.view_page_item_1, null);
        }
        listview = (ListView) mRootView.findViewById(R.id.listview);
        listview.setNestedScrollingEnabled(true);
        List> listems = new ArrayList>();
        for (int i = 0; i < name.length; i++) {
            Map listem = new HashMap();
            listem.put("name", name[i]);
            listems.add(listem);
        }
        SimpleAdapter simplead = new SimpleAdapter(getActivity(), listems,
                R.layout.list_item, new String[]{"name"},
                new int[]{R.id.name});


        listview.setAdapter(simplead);
        //缓存的rootView需要判断是否已经被加过parent， 如果有parent需要从parent删除，要不然会发生这个rootview已经有parent的错误。
        ViewGroup parent = (ViewGroup) mRootView.getParent();
        if (parent != null) {
            parent.removeView(mRootView);
        }

        return mRootView;
    }
}

activity_main.xml

需要注意的是滑动的View需要设置listview.setNestedScrollingEnabled(true)，否则滑动会失效。这里只介绍用法，不涉及原理，有任何疑问的同学可以留言，接下来会写一篇关于CoordinatorLayout实现原理的文章，敬请关注。