安卓开发-界面设计以及Tablayout

 开学之后给导师做一个安卓端的项目，之前代码经验不是太多。好在Java用起来还不算太难，在入门阶段而言是这样。现记录自己写代码过程中的一些问题，相信会有很多与我有相似背景的同学，希望能对你有所帮助，也作为我自己的总结。废话不多说，进入正题。

目录

（一）界面设计

（二）界面实现之tablayout

小结

---

---

（一）界面设计

 拿到公司的需求表之后，开始琢磨软件的布局与界面。在身边的大佬介绍之后，使用了磨刀工具。这是一款不需要代码的界面原型设计工具，上手很快，画界面就跟做ppt一样，很不错。

（二）界面实现之tablayout

开发环境为Android studio，配置开发环境，需要科学上网。

配置好环境之后，去找一本Android开发的书（最好近一两年出版的），一般在这类书的入门部分就有界面设计所需要的大多数控件的使用说明，再配合网络教程的指导即可。不过作为小白，往往容易被百度上天花乱坠的博文弄乱，所以配置书本使用比较好，有时候少走弯路。

在layout文件中，Android studio将默认的布局设定为constraintlayout，为了使用方便，我将其转换为relativelayout。这个过程遇到的问题是布局的preview不刷新，百度之后发现是编译工具版本不一致导致的，按照相应的博文就可以解决。然后是添加一些控件，包括button，textview等初等控件。

现在实现一个底部tab切换页面的功能，使用的是tablayout控件。这里有个问题是，许多博主的文章中都提到使用tablayout首先需要添加依赖库，然后我compile与implement都试了都要报错，以为是版本不一致，就找了好久。后面突然发现，在我使用的Android studio中，已经有这个控件了，根部不需要添加任何依赖。这里也给我一个感觉，遇到遇到先自己看一下，试着解决，直接网上找反而让你迷茫，因为博文写作时间、版本都不一致，许多问题解决方法都不一样。

tablayout的实现过程为：

（1、在一个布局中添加viewpager与tabview控件。viewpager显示每一个tab页的内容，tablayout显示对应的标题。这个xml命名为map.xml，它就是一个普通的layout文件，因而会有一个map.java文件调用它，这个后面介绍。

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="641dp"
        android:background="@android:color/white" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabGravity="center"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@android:color/holo_red_dark"
        app:tabTextColor="@android:color/darker_gray">
    </android.support.design.widget.TabLayout>

 （2、创建两个Java class，其继承fragment。这个为每个viewpager对应的类。就像每一个layout文件对应一个activity一样。在下面这段代码中，mymap这个类继承了Fragment,其会调用一个mymap.xml的文件，这个xml文件放自己显示的内容。

public class mymap extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.mymap, container, false);
    }
}

   （3、在map.java中需要做的事情有，加载viewpager与tablayout布局。并且要让他们联动，即点击一个tab对应一个页面，这需要创建适配器。

public class map extends AppCompatActivity {
    private TabLayout tabLayout;  //底部tabLayout
    private ViewPager viewPager;  // fragment内容显示区域
    private List<Fragment> fragmentList;
    private List<String> titleList;  //tab标题
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_map);
        //初始化控件
        tabLayout = findViewById(R.id.tablayout);
        viewPager = findViewById(R.id.viewpager);
        initTitile();
        initFragment();
        //
        viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), fragmentList, titleList));
        tabLayout.setupWithViewPager(viewPager);
    }    

    // 添加两个标题
    private void initTitile() {
        titleList = new ArrayList<>();
        titleList.add("地图"); 
        titleList.add("信号");
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(0)));
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(1)));
    }
    // 添加两个fragment
    private void initFragment() {
        fragmentList = new ArrayList<>();
        fragmentList.add(new mymap());
        fragmentList.add(new mysignal());
    }

    //这是适配器，让每个标题对应一个fragment，每个fragment中加载一个xml文件
    public class MyPagerAdapter extends FragmentPagerAdapter {
        //fragment集合与标题集合
        private List<Fragment> mFragmentList;
        private List<String> mTitleLis;

        public MyPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> tilteLis) {
            super(fm);
            mFragmentList = fragmentList;
            mTitleLis = tilteLis;
        }

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

        @Override
        public int getCount() {
            return mFragmentList.size();
        }
        //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitleLis.get(position);
        }

    }

上段代码中添加了两个tab按钮，然后添加了两个fragment,这里省略了mysignal（），其与mymap一样是一个继承自Fragment的方法，只需要把return inflater.inflate(R.layout.mymap, container, false);替换为对应的xml文件即可。

实现效果，点击下方地图与信号可以进行页面切换。

小结

可能会看晕了，没关系，这里面涉及几个小知识，作为小白的话，可以先查阅：fragment是什么以及其生命周期；适配器以及简单数组适配器例子。然后理一下各控件运行的过程与关系。

初写博文，不足之处敬请谅解。如果有问题，欢迎问我。