使用图标而不是文本滑动视图

时间:2014-07-10 22:05:30

标签: android

我想在我的应用中实现滑动视图,但我看到的每个示例都只有选项卡中的文字。我想要图标,而不是文字。作为参考,本页的底部视频是我想要实现的。 http://developer.android.com/design/patterns/swipe-views.html

2 个答案:

答案 0 :(得分:1)

视频显示的是带有滑动视图的操作栏的实现

这可能就是一个例子:

//HomeActivity.java
package com.swipe.view.tab;

import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class HomeActivity extends FragmentActivity {


    HomeAdapter mHomeAdapter;

    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home); //SetContent

        final ActionBar actionBar = getActionBar(); //Get actionBar

        mHomeAdapter= new HomeAdapter(getSupportFragmentManager()); //SetFragmentAdapter

        mViewPager = (ViewPager)  findViewById(R.id.page_view); //Get Reference to SwípeView

        mViewPager.setAdapter(mHomeAdapter); //We set the adapter to the SwipeView


        mViewPager.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener(){
                    @Override
                    public void onPageSelected(int position) {
                        getActionBar().setSelectedNavigationItem(position);
                    }
                }
        ); //Whenever we swipe we also change the tab-

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); //Navigation Mode in Tabs like the video
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowTitleEnabled(false); //We do not want the title bar.

        ActionBar.TabListener tabListener =  new ActionBar.TabListener() {
            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
                mViewPager.setCurrentItem(tab.getPosition()); //Wehenever a tab is clicked we set change the SwipeView
            }

            @Override
            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

            }

            @Override
            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

            }
        };

        for (int i = 0; i < mUtelPageAdapter.getCount(); i++) {
            actionBar.addTab(
                    actionBar.newTab()
                            .setIcon(mUtelPageAdapter.getPageICon(i)) //Set the icon instead of text.
                            .setTabListener(tabListener));
        } //We create tabs, they are going to be the number of fragments we have
    }

}

HomeAdapter.java

//HomeAdapter.java
package com.swipe.view.tab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;


public class HomeAdapter extends FragmentPagerAdapter {

    public List<Fragment> list_fragments;

    public List<Integer> list_icons;


    public HomeAdapter(FragmentManager fm){
        super(fm);
        list_fragments = new ArrayList<Fragment>();
        list_titles = new ArrayList<CharSequence>();
        list_fragments.add(new FragmentOne());



    }

    @Override
    public Fragment getItem(int position) {
        Fragment currentFragment = (Fragment) list_fragments.get(position);
        return currentFragment;
    }

    @Override
    public int getCount() {
        return list_fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "This won't appear";
    }

    public int getPageICon(int position){
        return  ((FragmentsBaseInterface) list_fragments.get(position)).getStateIcon();
    }
}

FragmentOne.java

//FragmentOne.java
package com.swipe.view.tab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class FragmentOne extends Fragment implements FragmentsBaseInterface{

    public static int ICON = R.drawable.fragment_selector;

    public FragmentOne() {

    }



    @Override
    public int getStateIcon() {
        return ICON;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }
}

FragmentsBaseInterface.java

package com.utel.edu.mx.app;

/**
 * Created by victor on 2/07/14.
 */
public interface FragmentsBaseInterface {


    public int getStateIcon();
}

activity_home.xml

//activity_home.xml
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/page_view"
    tools:context="com.swipe.view.tab.HomeActivity">


</android.support.v4.view.ViewPager>

fragment_one.xml

//fragment_one.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.swipe.view.tab.FragmentOne">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TEXT" />

</FrameLayout>

fragment_selector.xml

//fragment_selector.xml this has to be inside drawable folder.
<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true"
        android:drawable="@drawable/image_onewhen_pressed" /> <!-- pressed -->
    <item
        android:state_focused="false"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/image_onedefault" />

</selector>

此代码必须帮助您理解:D

答案 1 :(得分:0)

这不是标签栏。看起来People应用程序正在使用拆分操作栏,但我不知道他们是如何在顶部操作栏中实现均匀分布的操作栏项目。您应该可以使用操作栏中的自定义视图或自定义操作提供程序来复制它。