TShopping

 找回密碼
 註冊
搜索
查看: 338|回復: 0

[教學] 如何使用Toolbar+DrawerLayout+Tab+SwipRefresh

[複製鏈接]
發表於 2016-3-18 01:08:17 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
現在工具夠多了,
所以接下來在把之前的
如何使用Toolbar-Menu
如何使用DrawerLayout
如何使用下拉更新(SwipeRefreshLayout)
如何使用TabLayout
全部組合在一起。







01.png 02.png 03.png 04.png 06.png 07.png 08.png 09.png



main.xml
  1. <android.support.v4.widget.DrawerLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/drawer_layout"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <!-- The main content view -->
  7.     <android.support.v4.widget.SwipeRefreshLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"
  10.         android:id="@+id/refresh_layout">
  11.         <RelativeLayout
  12.             android:id="@+id/content_frame"
  13.             android:layout_width="match_parent"
  14.             android:layout_height="match_parent" >
  15.             <android.support.v7.widget.Toolbar
  16.                 android:layout_alignParentTop="true"
  17.                 android:id="@+id/toolbar"
  18.                 android:background="#fff000"
  19.                 android:layout_height="wrap_content"
  20.                 android:layout_width="match_parent"
  21.                 android:minHeight="?attr/actionBarSize" />
  22.             <android.support.design.widget.TabLayout
  23.                 android:layout_below="@id/toolbar"
  24.                 android:id="@+id/tabs"
  25.                 android:layout_width="match_parent"
  26.                 android:layout_height="wrap_content" />
  27.             <android.support.v4.view.ViewPager
  28.                 android:id="@+id/viewpager"
  29.                 android:layout_below="@id/tabs"
  30.                 android:layout_width="match_parent"
  31.                 android:layout_height="match_parent"
  32.                 />
  33.         </RelativeLayout>
  34.     </android.support.v4.widget.SwipeRefreshLayout>
  35.     <!-- The navigation drawer -->
  36.     <ListView android:id="@+id/left_drawer"
  37.         android:layout_width="240dp"
  38.         android:layout_height="match_parent"
  39.         android:layout_gravity="start"
  40.         android:choiceMode="singleChoice"
  41.         android:divider="@android:color/transparent"
  42.         android:dividerHeight="0dp"
  43.         android:background="#99999999"/>
  44. </android.support.v4.widget.DrawerLayout>
複製代碼

MainActivity.java
  1. public class MainActivity extends AppCompatActivity {

  2.     private DrawerLayout mDrawerLayout;

  3.     private ActionBarDrawerToggle mActionBarDrawerToggle;

  4.     private Toolbar toolbar;

  5.     private android.support.design.widget.TabLayout mTabs;

  6.     private ViewPager mViewPager;

  7.     private SwipeRefreshLayout mSwipeRefreshLayout;

  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         initToolbar();
  13.         initViewPager();
  14.         initSwipRefresh();
  15.     }

  16.     private void initSwipRefresh(){
  17.         mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh_layout);
  18.         mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
  19.             @Override
  20.             public void onRefresh() {
  21.                 mSwipeRefreshLayout.setRefreshing(false);
  22.             }
  23.         });

  24.     }

  25.     private void initToolbar(){
  26.         toolbar = (Toolbar) findViewById(R.id.toolbar);
  27.         // Set an OnMenuItemClickListener to handle menu item clicks
  28.         toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
  29.             @Override
  30.             public boolean onMenuItemClick(MenuItem item) {
  31.                 // Handle the menu item
  32.                 return true;
  33.             }
  34.         });
  35.         // Inflate a menu to be displayed in the toolbar
  36.         toolbar.inflateMenu(R.menu.menu_main);
  37.         setSupportActionBar(toolbar);

  38.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  39.         getSupportActionBar().setHomeButtonEnabled(true);

  40.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  41.         mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
  42.             @Override
  43.             public void onDrawerOpened(View drawerView) {
  44.                 super.onDrawerOpened(drawerView);

  45.             }
  46.             @Override
  47.             public void onDrawerClosed(View drawerView) {
  48.                 super.onDrawerClosed(drawerView);
  49.             }
  50.         };
  51.         mActionBarDrawerToggle.syncState();
  52.         mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);
  53.     }

  54.     private void initViewPager(){
  55.         mTabs = (android.support.design.widget.TabLayout) findViewById(R.id.tabs);
  56.         mTabs.addTab(mTabs.newTab().setText("Tab 1"));
  57.         mTabs.addTab(mTabs.newTab().setText("Tab 2"));
  58.         mTabs.addTab(mTabs.newTab().setText("Tab 3"));

  59.         mViewPager = (ViewPager) findViewById(R.id.viewpager);
  60.         mViewPager.setAdapter(new SamplePagerAdapter());
  61.         mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabs));
  62.     }

  63.     private class SamplePagerAdapter extends PagerAdapter {

  64.         @Override
  65.         public int getCount() {
  66.             return 3;
  67.         }

  68.         @Override
  69.         public boolean isViewFromObject(View view, Object o) {
  70.             return o == view;
  71.         }

  72.         @Override
  73.         public CharSequence getPageTitle(int position) {
  74.             return "Item " + (position + 1);
  75.         }


  76.         @Override
  77.         public Object instantiateItem(ViewGroup container, int position) {
  78.             View view = getLayoutInflater().inflate(R.layout.pager_item,
  79.                     container, false);
  80.             container.addView(view);
  81.             TextView title = (TextView) view.findViewById(R.id.item_title);
  82.             title.setText(String.valueOf(position + 1));
  83.             return view;
  84.         }
  85.         @Override
  86.         public void destroyItem(ViewGroup container, int position, Object object) {
  87.             container.removeView((View) object);
  88.         }

  89.     }


  90.     public boolean onCreateOptionsMenu(Menu menu) {
  91.         MenuInflater inflater = getMenuInflater();
  92.         inflater.inflate(R.menu.menu_main, menu);

  93.         MenuItem menuSearchItem = menu.findItem(R.id.my_search);
  94.         // Get the SearchView and set the searchable configuration
  95.         SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
  96. //        SearchView searchView = (SearchView) menuSearchItem.getActionView();
  97.         SearchView searchView = (SearchView) menuSearchItem.getActionView();
  98.         // Assumes current activity is the searchable activity
  99.         searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
  100.         searchView.setIconifiedByDefault(true); // Do not iconify the widget; expand it by default
  101.         return true;
  102.     }

  103.     @Override
  104.     public boolean onOptionsItemSelected(MenuItem item) {
  105.         switch (item.getItemId()) {
  106.             case R.id.action_about:
  107.                 // About option clicked.
  108.                 return true;
  109.             case R.id.action_exit:
  110.                 // Exit option clicked.
  111.                 return true;
  112.             case R.id.action_settings:
  113.                 // Settings option clicked.
  114.                 return true;
  115.             default:
  116.                 return super.onOptionsItemSelected(item);
  117.         }
  118.     }
  119. }
複製代碼

pager_item.xml
  1. <?xml version="1.0" encoding="utf-8"?>

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     android:gravity="center">

  7.     <TextView
  8.         android:id="@+id/item_subtitle"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:textAppearance="?android:attr/textAppearanceLarge"
  12.         android:text="Page:"/>

  13.     <TextView
  14.         android:id="@+id/item_title"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:textSize="80sp" />

  18. </LinearLayout>
  19. manifest
  20. <?xml version="1.0" encoding="utf-8"?>
  21. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  22.     package="example.givemepass.toolbardemo" >

  23.     <application
  24.         android:allowBackup="true"
  25.         android:icon="@mipmap/ic_launcher"
  26.         android:label="@string/app_name"
  27.         android:theme="@style/AppTheme" >
  28.         <activity
  29.             android:name=".MainActivity"
  30.             android:theme="@style/AppTheme"
  31.             android:label="@string/app_name" >
  32.             <intent-filter>
  33.                 <action android:name="android.intent.action.MAIN" />
  34.                 <category android:name="android.intent.category.LAUNCHER" />
  35.             </intent-filter>
  36.         </activity>
  37.         <!-- Searchable -->
  38.         <activity
  39.             android:name=".SearchableActivity"
  40.             android:theme="@style/Theme.AppCompat.Light"
  41.             android:launchMode="singleTop" >
  42.             <intent-filter>
  43.                 <action android:name="android.intent.action.SEARCH" />
  44.             </intent-filter>
  45.             <intent-filter>
  46.                 <action android:name="android.intent.action.VIEW" />
  47.             </intent-filter>

  48.             <meta-data
  49.                 android:name="android.app.searchable"
  50.                 android:resource="@xml/searchable"
  51.                 />
  52.         </activity>

  53.         <!-- Points to searchable activity so the whole app can invoke search. -->
  54.         <meta-data
  55.             android:name="android.app.default_searchable"
  56.             android:value=".SearchableActivity" />
  57.     </application>

  58. </manifest>
  59. style
  60. <resources>

  61.     <!-- Base application theme. -->
  62.     <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
  63.         <!-- Customize your theme here. -->
  64.     </style>

  65. </resources>
  66. menu
  67. <menu xmlns:android="http://schemas.android.com/apk/res/android"
  68.     xmlns:app="http://schemas.android.com/apk/res-auto"
  69.     xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
  70.     <item android:id="@+id/action_settings" android:title="@string/action_settings"
  71.         android:orderInCategory="100" app:showAsAction="never" />
  72.     <item
  73.         android:id="@+id/action_about"
  74.         android:orderInCategory="200"
  75.         app:showAsAction="never"
  76.         android:title="About"/>
  77.     <item
  78.         android:id="@+id/action_exit"
  79.         android:orderInCategory="300"
  80.         app:showAsAction="never"
  81.         android:title="Exit"/>
  82.     <item android:id="@+id/my_search"
  83.         android:title="@string/search_title"
  84.         android:icon="@drawable/ic_open_search"
  85.         app:showAsAction="ifRoom"
  86.         app:actionViewClass="android.support.v7.widget.SearchView" />
  87. </menu>
複製代碼

gradle
  1. dependencies {
  2.     compile fileTree(dir: 'libs', include: ['*.jar'])
  3.     compile 'com.android.support:appcompat-v7:22.2.0'
  4.     compile 'com.android.support:design:22.2.0'
  5. }
複製代碼
程式碼

文章來源

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 06:27 , Processed in 0.061542 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表