Android项目开发之--------地铁时光机（一，搭建主框架）

一：先看一下框架搭建后的效果图

     ，

二：框架结构

　　（1）底部导航栏采用的是： MainActivity(主框架），

                   MsgFragment(首页），

                   HistoryFragment(历史清单含顶部导航栏），

                  MineFragment(我的）。

 　　（2）自定义标题栏（自定义toolbar）

         

三：底部导航栏的实现

主要代码：

MainActivity:

  //定义底部文字
    private final int[] TAB_TITLES = new int[]{
            R.string.menu_msg, R.string.menu_history, R.string.menu_mine
    };
    //定义底部图标
    private final int[] TAB_IMGS = new int[]{
            R.drawable.tab_main_msg, R.drawable.tab_main_history, R.drawable.tab_main_mine
    };
    //黄油刀 找到控件
    @BindView(R.id.view_pager)
    ViewPager viewPager;
    @BindView(R.id.tab_layout)
    TabLayout tabLayout;

     //定义适配器
    private PagerAdapter pagerAdapter;




//初始化页卡
    private void initPager() {
        pagerAdapter = new MainFragmentAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition(), false);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }


         //设置页卡显示效果
    private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitles, int[] tabImgs) {
        for (int i = 0; i < tabImgs.length; i++) {
            TabLayout.Tab tab = tabLayout.newTab();
            View view = inflater.inflate(R.layout.item_main_menu, null);
            //使用自定义视图，便于修改
            tab.setCustomView(view);
            TextView tvTitle = (TextView) view.findViewById(R.id.txt_tab);
            tvTitle.setText(tabTitles[i]);
            ImageView imgTab = (ImageView) view.findViewById(R.id.img_tab);
            imgTab.setImageResource(tabImgs[i]);
            tabLayout.addTab(tab);
        }
    }

MainActivity.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <com.example.myapplication.mytoobar.CustomToolbar
        android:id="@+id/bar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
 <View
     android:layout_width="match_parent"
     android:layout_height="0.5dp"
     android:background="@color/line_gray"
     android:layout_alignBottom="@+id/bar1"></View>
</RelativeLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dip"
        android:background="@color/line_gray" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:tabIndicatorHeight="0dip" />

   </LinearLayout>

Adapter:

 @Override
    public Fragment getItem(int i) {
        Fragment fragment = null;
        switch (i) {
            case 0:
                fragment = new MsgFragment();
                break;
            case 1:
                fragment = new HistoryFragment();
                break;
            case 2:
                fragment = new MineFragment();
                break;
            default:
                break;
        }
        return fragment;

    }

    @Override
    public int getCount() {
        return 3;
    }

四：自定义标题栏的实现

关键代码：

toolbar.xml:

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"


        android:src="@mipmap/ic_launcher"
        android:layout_gravity="left"
        />
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SubwayGo"
        android:textColor="#000000"
        android:layout_gravity="center"
        android:singleLine="true"
        android:visibility="visible"
        android:textSize="30dp"
        android:fontFamily="cursive"
        />
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textSize="20dp"
         android:textColor="@color/colorPrimaryDark"
         android:text="设置"
         android:gravity="center"
         android:layout_gravity="right"
         android:visibility="visible"
         />

public class CustomToolbar extends Toolbar {

   public CustomToolbar(Context context){
      this(context,null);
  }
    public CustomToolbar(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public  CustomToolbar(Context context,AttributeSet attrs,int defStyleAttr){
       super(context,attrs,defStyleAttr);
       inflate(context, R.layout.toolbar,this);
    }
}

五：总结一下，以上代码都是关键代码，至于点击事件的设置，页面数据的传递等等比较基础，就不附上了。下一篇会对线路的最优路径进行选择。