ActionBar + ViewPager(PagerSlidingTabStrip),actionbarviewpager

來源:互聯網
上載者:User

ActionBar + ViewPager(PagerSlidingTabStrip),actionbarviewpager

既然是要實現ActionBar,那麼第一步當然就是編輯menu目錄下的main.xml檔案了,代碼如下所示:

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:context=".MainActivity" >    <item        android:id="@+id/action_search"        android:actionViewClass="android.widget.SearchView"        android:icon="@drawable/actionbar_search_icon"        android:showAsAction="ifRoom|collapseActionView"        android:title="@string/action_search"/>    <item        android:id="@+id/action_my_travels"        android:icon="@drawable/actionbar_add_icon"        android:showAsAction="ifRoom"        android:title="@string/action_my_travels"/>    <item android:id="@+id/action_offline_browse"        android:title="@string/action_offline_browse"        android:showAsAction="never" />    <item android:id="@+id/action_feedback"        android:title="@string/action_feedback"        android:showAsAction="never" />    <item android:id="@+id/action_settings"        android:title="@string/action_settings"        android:showAsAction="never" />    <item android:id="@+id/action_photo_test"        android:title="@string/action_photo_test"        android:showAsAction="never" /></menu>

PagerSlidingTabStrip是GitHub上的一個開源架構,由Andreas Stuetz編寫,它可以完成和ActionBar Tab基本類似的功能,不過由於是完全開源的,我們可以隨意修改其中的代碼,因而擴充性非常好。

之後是activity_main的代碼:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.francis.changtravels.utils.PagerSlidingTabStrip        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="40dp" />        <android.support.v4.view.ViewPager            android:id="@+id/pager"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@+id/tabs" /></RelativeLayout>
比較簡單,其中放置了兩個控制項,PagerSlidingTabStrip在最頂部,ViewPager在PagerSlidingTabStrip的下面。

接著建立TravelsFragment、SubjectFragment、DestinationFragment,分別對應著遊記、專題、目的地這三個介面,Fragment中只需放置一個TextView用於表示這個介面即可,TravesFragment(SubjectFragment、DestinationFragment就不說啦)如下所示:

package com.francis.changtravels.fragment;import android.os.Bundle;import android.support.v4.app.Fragment;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;import android.widget.TextView;import com.francis.changtravels.R;/** * Created by Francis on 14-9-18. */public class TravelsFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View rootView = inflater.inflate(R.layout.photo_wall_falls_demo,container,false);        return rootView;    }}

其中photo_wall_falls_demo是自訂的布局,這裡先不贅述(主要是講ViewPager嘛)

最後修改MainActivity中的代碼,加入PagerSlidingTabStrip的配置,如下所示:

package com.francis.changtravels.activity;import java.lang.reflect.Field;import java.lang.reflect.Method;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.Menu;import android.view.MenuItem;import android.view.ViewConfiguration;import android.view.Window;import com.francis.changtravels.utils.PagerSlidingTabStrip;import com.francis.changtravels.fragment.DestinationFragment;import com.francis.changtravels.R;import com.francis.changtravels.fragment.SubjectFragment;import com.francis.changtravels.fragment.TravelsFragment;public class MainActivity extends FragmentActivity {    /**     * 遊記介面的Fragment     */    private TravelsFragment travelsFragment;    /**     * 專題介面的Fragment     */    private SubjectFragment subjectFragment;    /**     * 目的地介面的Fragment     */    private DestinationFragment destinationFragment;    /**     * PagerSlidingTabStrip的執行個體     */    private PagerSlidingTabStrip tabs;    /**     * 擷取當前螢幕的密度     */    private DisplayMetrics dm;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        setOverflowShowingAlways();        dm = getResources().getDisplayMetrics();        ViewPager pager = (ViewPager) findViewById(R.id.pager);        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);        // 為ViewPager執行個體添加自訂的Adapter        pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));        // 將ViewPager的執行個體設定到了PagerSlidingTabStrip中        tabs.setViewPager(pager);        // 對PagerSlidingTabStrip的細節進行配置        setTabsValue();    }    /**     * 對PagerSlidingTabStrip的各項屬性進行賦值。     */    private void setTabsValue() {        // 設定Tab是自動填滿滿螢幕的        tabs.setShouldExpand(true);        // 設定Tab的分割線是透明的        tabs.setDividerColor(Color.TRANSPARENT);        // 設定Tab底部線的高度        tabs.setUnderlineHeight((int) TypedValue.applyDimension(                TypedValue.COMPLEX_UNIT_DIP, 1, dm));        // 設定Tab Indicator的高度        tabs.setIndicatorHeight((int) TypedValue.applyDimension(                TypedValue.COMPLEX_UNIT_DIP, 4, dm));        // 設定Tab標題文字的大小        tabs.setTextSize((int) TypedValue.applyDimension(                TypedValue.COMPLEX_UNIT_SP, 16, dm));        // 設定Tab Indicator的顏色        tabs.setIndicatorColor(Color.parseColor("#45c01a"));        // 設定選中Tab文字的顏色 (這是我自訂的一個方法)        tabs.setSelectedTextColor(Color.parseColor("#45c01a"));        // 取消點擊Tab時的背景色        tabs.setTabBackground(0);    }    public class MyPagerAdapter extends FragmentPagerAdapter {        public MyPagerAdapter(FragmentManager fm) {            super(fm);        }        private final String[] titles = { "遊記", "專題", "目的地" };        @Override        public CharSequence getPageTitle(int position) {            return titles[position];        }        @Override        public int getCount() {            return titles.length;        }        @Override        public Fragment getItem(int position) {            switch (position) {                case 0:                    if (travelsFragment == null) {                        travelsFragment = new TravelsFragment();                    }                    return travelsFragment;                case 1:                    if (subjectFragment == null) {                        subjectFragment = new SubjectFragment();                    }                    return subjectFragment;                case 2:                    if (destinationFragment == null) {                        destinationFragment = new DestinationFragment();                    }                    return destinationFragment;                default:                    return null;            }        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        return false;    }    @Override    public boolean onMenuOpened(int featureId, Menu menu) {        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {                try {                    Method m = menu.getClass().getDeclaredMethod(                            "setOptionalIconsVisible", Boolean.TYPE);                    m.setAccessible(true);                    m.invoke(menu, true);                } catch (Exception e) {                }            }        }        return super.onMenuOpened(featureId, menu);    }    private void setOverflowShowingAlways() {        try {            ViewConfiguration config = ViewConfiguration.get(this);            Field menuKeyField = ViewConfiguration.class                    .getDeclaredField("sHasPermanentMenuKey");            menuKeyField.setAccessible(true);            menuKeyField.setBoolean(config, false);        } catch (Exception e) {            e.printStackTrace();        }    }}

效果


在遊記的Fragment中,使用了不規則的瀑布流,關於瀑布流的使用請參考下一篇博文。




Android中Viewpager跳轉其他介面(不是Viewpager中的),這種怎做?代碼在那裡寫?

ImageView img2 = new ImageView(this);
img2.setBackgroundResource(R.drawable.mei1);
img2.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Intent imgti2 = new Intent();
imgti2.setClass(MainActivity.this, GuanggaoActivity.class);
imgti2.putExtra("gurl", "qzone.qq.com/");
startActivity(imgti2);

}
});
advviewpage.add(img2);
這樣就可以實現點擊view 跳轉了
 
android 導覽列的滑動效果(滑塊隨著頁面滑動也跟著平滑)怎做,有demo?

簡單的Actionbar 搭配ViewPager。你在eclipse中new 一個Activity,選擇blank activity,然後在Navigation type選擇ActionBar tabs with ViewPager,就會幫你產生一個demo了。
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.