Android project development – Metro time machine (I, building the main framework)

1： Let's take a look at the renderings after the framework is built

2： Frame structure

(1) the bottom navigation bar adopts: mainactivity,

Msgfragment (home page),

Historyfragment (history list with top navigation bar),

Minefragment (mine).

(2) custom title bar (custom toolbar)

3： Implementation of bottom navigation bar

Main code:

MainActivity:

 1   //定义底部文字
 2     private final int[] TAB_TITLES = new int[]{
 3             R.string.menu_msg, R.string.menu_history, R.string.menu_mine
 4     };
 5     //定义底部图标
 6     private final int[] TAB_IMGS = new int[]{
 7             R.drawable.tab_main_msg, R.drawable.tab_main_history, R.drawable.tab_main_mine
 8     };
 9     //黄油刀 找到控件
10     @BindView(R.id.view_pager)
11     ViewPager viewPager;
12     @BindView(R.id.tab_layout)
13     TabLayout tabLayout;
14 
15      //定义适配器
16     private PagerAdapter pagerAdapter;
17 
18 
19 
20 
21 //初始化页卡
22     private void initPager() {
23         pagerAdapter = new MainFragmentAdapter(getSupportFragmentManager());
24         viewPager.setAdapter(pagerAdapter);
25         viewPager.addOnPagechangelistener(new TabLayout.TabLayoutOnPagechangelistener(tabLayout));
26         tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
27             @Override
28             public void onTabSelected(TabLayout.Tab tab) {
29                 viewPager.setCurrentItem(tab.getPosition(), false);
30             }
31 
32             @Override
33             public void onTabUnselected(TabLayout.Tab tab) {
34 
35             }
36 
37             @Override
38             public void onTabReselected(TabLayout.Tab tab) {
39 
40             }
41         });
42     }
43 
44 
45          //设置页卡显示效果
46     private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitles, int[] tabImgs) {
47         for (int i = 0; i < tabImgs.length; i++) {
48             TabLayout.Tab tab = tabLayout.newTab();
49             View view = inflater.inflate(R.layout.item_main_menu, null);
50             //使用自定义视图，便于修改
51             tab.setCustomView(view);
52             TextView tvTitle = (TextView) view.findViewById(R.id.txt_tab);
53             tvTitle.setText(tabTitles[i]);
54             ImageView imgTab = (ImageView) view.findViewById(R.id.img_tab);
55             imgTab.setImageResource(tabImgs[i]);
56             tabLayout.addTab(tab);
57         }
58     }

MainActivity.xml:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:app="http://schemas.android.com/apk/res-auto"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical"
 7     tools:context=".MainActivity">
 8 <RelativeLayout
 9     android:layout_width="match_parent"
10     android:layout_height="wrap_content"
11     >
12     <com.example.myapplication.mytoobar.CustomToolbar
13         android:id="@+id/bar1"
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"/>
16  <View
17      android:layout_width="match_parent"
18      android:layout_height="0.5dp"
19      android:background="@color/line_gray"
20      android:layout_alignBottom="@+id/bar1"></View>
21 </RelativeLayout>
22     <android.support.v4.view.ViewPager
23         android:id="@+id/view_pager"
24         android:layout_width="match_parent"
25         android:layout_height="0dip"
26         android:layout_weight="1" />
27 
28     <View
29         android:layout_width="match_parent"
30         android:layout_height="0.5dip"
31         android:background="@color/line_gray" />
32 
33     <android.support.design.widget.TabLayout
34         android:id="@+id/tab_layout"
35         android:layout_width="match_parent"
36         android:layout_height="100dp"
37         app:tabIndicatorHeight="0dip" />
38 
39    </LinearLayout>

Adapter:

 1  @Override
 2     public Fragment getItem(int i) {
 3         Fragment fragment = null;
 4         switch (i) {
 5             case 0:
 6                 fragment = new MsgFragment();
 7                 break;
 8             case 1:
 9                 fragment = new HistoryFragment();
10                 break;
11             case 2:
12                 fragment = new mineFragment();
13                 break;
14             default:
15                 break;
16         }
17         return fragment;
18 
19     }
20 
21     @Override
22     public int getCount() {
23         return 3;
24     }

4： Implementation of custom title bar

Key codes:

toolbar.xml:

 1  <ImageView
 2         android:layout_width="wrap_content"
 3         android:layout_height="wrap_content"
 4 
 5 
 6         android:src="@mipmap/ic_launcher"
 7         android:layout_gravity="left"
 8         />
 9     <TextView
10         android:id="@+id/tv_title"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:text="SubwayGo"
14         android:textColor="#000000"
15         android:layout_gravity="center"
16         android:singleLine="true"
17         android:visibility="visible"
18         android:textSize="30dp"
19         android:fontFamily="cursive"
20         />
21      <TextView
22          android:layout_width="wrap_content"
23          android:layout_height="wrap_content"
24          android:textSize="20dp"
25          android:textColor="@color/colorPrimaryDark"
26          android:text="设置"
27          android:gravity="center"
28          android:layout_gravity="right"
29          android:visibility="visible"
30          />

 1 public class CustomToolbar extends Toolbar {
 2 
 3    public CustomToolbar(Context context){
 4       this(context,null);
 5   }
 6     public CustomToolbar(Context context, AttributeSet attrs) {
 7         this(context, attrs,0);
 8     }
 9     public  CustomToolbar(Context context,AttributeSet attrs,int defStyleAttr){
10        super(context,attrs,defStyleAttr);
11        inflate(context, R.layout.toolbar,this);
12     }
13 }

5： To sum up, the above codes are key codes. As for the basis of click event setting, page data transmission and so on, they are not attached. The next article will select the optimal path of the line.