2017-02-20 155 views
0

我希望实现TabLayout的图像。 enter image description hereTabLayout或水平滚动视图Android

有人能告诉我实现这个目标的方法吗?

我的代码:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/sliding_tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:tabMode="scrollable" 
     app:tabGravity="center"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="0px" 
     android:layout_weight="1" 
     android:background="@android:color/white" /> 

</LinearLayout> 

我已经设置的属性app:tabMode="scrollable"app:tabGravity="center"但所有的标签只是坚持在布局左侧。

无论标签有多少,我都希望达到上图所示的效果。意味着标签的位置将远离中心或标签布局。

PageFragment.java:

package com.example.testing; 

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


// In this case, the fragment displays simple text based on the page 
public class PageFragment extends Fragment { 
    public static final String ARG_PAGE = "ARG_PAGE"; 

    private int mPage; 

    public static PageFragment newInstance(int page) { 
     Bundle args = new Bundle(); 
     args.putInt(ARG_PAGE, page); 
     PageFragment fragment = new PageFragment(); 
     fragment.setArguments(args); 
     return fragment; 
    } 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     mPage = getArguments().getInt(ARG_PAGE); 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     View view = inflater.inflate(R.layout.fragment_page, container, false); 
     TextView textView = (TextView) view; 
     textView.setText("Fragment #" + mPage); 
     return view; 
    } 


} 

SampleFragmentPagerAdapter.java:

package com.example.testing; 

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



public class SampleFragmentPagerAdapter extends FragmentPagerAdapter { 
    final int PAGE_COUNT = 3; 
    private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" }; 
    private Context context; 

    public SampleFragmentPagerAdapter(FragmentManager fm, Context context) { 
     super(fm); 
     this.context = context; 
    } 

    @Override 
    public int getCount() { 
     return PAGE_COUNT; 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return PageFragment.newInstance(position + 1); 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 
     // Generate title based on item position 
     return tabTitles[position]; 
    } 
} 

TabActivity.java:

package com.example.testing; 

import android.support.design.widget.TabLayout; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 

public class TabAcitivity extends AppCompatActivity { 

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

     // Get the ViewPager and set it's PagerAdapter so that it can display items 
     ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); 
     viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(),TabAcitivity.this)); 

     // Give the TabLayout the ViewPager 
     TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); 
     tabLayout.setupWithViewPager(viewPager); 
    } 
} 

enter image description here

的选项卡FR启动在左边。我如何让它从中间开始?还是使用水平滚动ListView更好?

+0

你能发布你的java代码吗? –

+0

@SachinSaxena请检查代码 –

+0

请从布局中删除app:tabGravity =“center”后检查。我认为它应该工作。 –

回答