Typical Android Interface Design (6) -- ActionBar Tab + ViewPager + Fagment implement sliding navigation, actionbarviewpager

Typical Android Interface Design (6) -- ActionBar Tab + ViewPager + Fagment implement sliding navigation, actionbarviewpager

I. Problem Description

In the typical Android interface design article, the typical sliding navigation interface can be implemented easily by using ActionBar, or even similar to the typical Android Interface Design (3). It can be seen that ActionBar is still relatively powerful, and the key is to go deep into it and use it flexibly. Here we will use ActionBar to achieve the effect:

Ii. Features of this example

1. Compatibility with earlier versions
2. Use ActionBar split design (split)
3. Use a custom View as a Tab
4. sliding navigation with ViewPager

Iii. Code explanation:

　　1. Add a v7 compatibility package to the Project

To be backward compatible, you need to add the android-support-v7-appcompat of the v7 compatibility package to the project and inherit ActionBarActivity when creating MainActivity

public class MainActivity extends ActionBarActivity implements TabListener,OnPageChangeListener{        protected void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);            initActionBar();            initViewPager();        }        。。。}

Call initActionBar and intViewPager in the onCreeate method to initialize ActionBar and ViewPager respectively.

　　2. initActionBar () code: Initialize ActionBar

Private void initActionBar () {actionBar = super. getsuppactionactionbar (); actionBar. setDisplayShowHomeEnabled (true); actionBar. setDisplayHomeAsUpEnabled (true); actionBar. setIcon (R. drawable. sun); actionBar. setTitle ("two mobile phones"); // sets the navigation mode to Tabs actionBar. setNavigationMode (ActionBar. NAVIGATION_MODE_TABS); // create and configure the Tab createTab (R. layout. nav, R. drawable. icon_home_weixiu_bg, "Hotspot device"); createTab (R. layout. nav, R. drawable. icon_home_zzj_bg, "excavator"); createTab (R. layout. nav, R. drawable. icon_home_1_pro_bg, "loader ");}

CreateTab method:

Private void createTab (int layout, int imgId, String title) {View = LayoutInflater. from (this ). inflate (layout, null); (TextView) view. findViewById (R. id. tvTitle )). setText (title); (ImageView) view. findViewById (R. id. ivNav )). setImageResource (imgId); Tab tab = actionBar. newTab (). setCustomView (view) // custom View. setTabListener (this); actionBar. addTab (tab );}

Nav. xml: The layout file of the tab to achieve the effect of the ICON above the Title

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content" android:padding="2dp" >    <ImageView        android:id="@+id/ivNav"        android:layout_width="20dp"        android:layout_height="20dp"        android:scaleType="centerInside"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"/>    <TextView        android:id="@+id/tvTitle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_below="@+id/ivNav"        android:textColor="#fff"/></RelativeLayout>

3. initViewPager Method

Private String [] titles = {"", ""}; private void initViewPager () {mViewPager = (ViewPager) findViewById (R. id. vpList); fragList = new ArrayList <Fragment> (); Bundle bundle = null; Fragment frag = null; for (int I = 0; I <titles. length; I ++) {frag = new MachineFragment (); bundle = new Bundle (); bundle. putString ("title", titles [I]); frag. setArguments (bundle); fragList. add (frag);} adapter = new MachinePagerAdapter (super. getsuppfrfragmentmanager (), fragList); mViewPager. setAdapter (adapter); mViewPager. setOnPageChangeListener (this );}

MachinePagerAdapter adapter:

Public class MachinePagerAdapter extends FragmentPagerAdapter {private List <Fragment> fragmentList; public MachinePagerAdapter (FragmentManager fm, List <Fragment> list) {super (fm); this. fragmentList = list;} public Fragment getItem (int arg0) {return fragmentList. get (arg0);} public int getCount () {return fragmentList. size () ;}@ Override public int getItemPosition (Object object Object) {return POSITION_NONE; // the child cannot be found and needs to be reloaded }}

MachineFragment: It can be designed based on actual conditions. Only one text box is displayed.

Public class MachineFragment extends Fragment {private String title; public void setArguments (Bundle bundle) {title = bundle. getString ("title"); // accept input parameters} public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {TextView textView = new TextView (getActivity ()); textView. setText (title); textView. setTextSize (20); textView. setTextColor (Color. RED); textView. setGravity (Gravity. CENTER); LinearLayout layout = new LinearLayout (getActivity (); LayoutParams params = new LayoutParams (LayoutParams. MATCH_PARENT, LayoutParams. MATCH_PARENT); layout. setBackgroundColor (Color. WHITE); layout. addView (textView, params); return layout ;}}

4. Implement listening

Implements OnPageChangeListener: When the View slides, switch the Tab public void publish (int arg0) {} public void onPageScrolled (int arg0, float arg1, int arg2) {} public void onPageSelected (int idx) {actionBar. selectTab (actionBar. getTabAt (idx);} implements TabListener when you click tab, switch to ViewPager public void onPageScrollStateChanged (int arg0) {} public void onPageScrolled (int arg0, float arg1, int arg2) {} public void onPageSelected (int idx) {actionBar. selectTab (actionBar. getTabAt (idx ));}

5. ActionBar Menu

Main. xml menu configuration, using xmlns: app = "http://schemas.android.com/apk/res-auto" compatible with earlier versions, and using app: showAsAction otherwise showAsAction will expire, even if set to always menu item still appears in Overflow

<Menu xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: app = "http://schemas.android.com/apk/res-auto"> <item android: id = "@ + id/action_share" android: orderInCategory = "100" app: showAsAction = "always" android: title = "share" android: icon = "@ drawable/share_ico"/> <item android: id = "@ + id/action_common" android: orderInCategory = "100" app: showAsAction = "always" android: title = "comment" android: icon = "@ drawable/com_btn"/> </menu>

Generate option menu

public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main, menu);        return true;    }

Response menu

Public boolean onOptionsItemSelected (MenuItem item) {switch (item. getItemId () {case R. id. action_share: Toast. makeText (this, "click to share", Toast. LENGTH_LONG ). show (); break; case R. id. action_common: Toast. makeText (this, "click to comment", Toast. LENGTH_LONG ). show (); break;} return super. onOptionsItemSelected (item );}

6. Implement the split design of ActionBar

Arrange menu options at the bottom

Add the android: uiOptions = "splitActionBarWhenNarrow" attribute to MainActivity in AndroidManifest. xml.

Iv. ActionBar Style

If the Theme. AppCompat topic style must be used for earlier versions of the Activity, you can define the ActionBar style based on the topic.

<style name="Theme.MyActionBar" parent="@style/Theme.AppCompat.Light">…</style>

Actionbar has many styles and requires compatibility consideration, which is troublesome. We recommend that you use Android Action Bar Style Generator to easily generate

Web: http://jgilfelt.github.io/android-actionbarstylegenerator/

 

For more information, clickView Source CodeRun the test in person.

For questions or technical exchanges, please join the official QQ group: (452379712)

 

Author: Jerry Education
Source: http://www.cnblogs.com/jerehedu/
The copyright of this article belongs to Yantai Jerry Education Technology Co., Ltd. and the blog Park. You are welcome to repost it. However, you must keep this statement without the author's consent and provide the original article connection on the article page, otherwise, you are entitled to pursue legal liability.