android.support.design.widget.TabLayout的錯誤位置用戶界面

Question

我使用android.support.design.widget.TabLayout用Tab Layout構建詳細頁面。 但是，初始化時我的布局有問題。 我希望此頁面標題為中心選項卡布局（圖2）。 這是我的代碼：

Layout.xml

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

NewsDetailActivity.java

public class NewsDetailActivity extends AppCompatActivity implements NewsDetailFragmentPagerAdapter.OnLoadListener {

public static String ARG_TITLE = "ARG_TITLE";
public static String ARG_CATEGORY = "ARG_CATEGORY";
public static String ARG_ITEM_ID = "ARG_ITEM_ID";
public static final String ARG_NEWS_LIST = "ARG_NEWS_LIST";
public static final String ARG_UPDATE_TIME = "ARG_UPDATE_TIME";
public static final String RANKING_TITLE = "ランキング";

/**
 * View pager
 */
private ViewPager mViewPager;

/**
 * Tab layout
 */
private TabLayout mTabLayout;

/**
 * News detal fragment pager adapter
 */
private NewsDetailFragmentPagerAdapter mNewsDetailFragmentPagerAdapter;

/**
 * Update time (JSON update)
 */
private String mUpdateTime;

/**
 * Snack bar (Advertisement)
 */
private Snackbar snackbar;

/**
 * スワイプチュートリアルを表示するイメージビューです（取得：onCreateView/破棄：onDestroyView）
 */
protected ImageView mImageViewTutorialSwipe;

/**
 * News Util
 */
private NewsUtil newsUtil;

/**
 * onCreate
 * @param savedInstanceState
 */
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_news_detail);

    // Check showed tutorial
    boolean tutorialShowed;

    // チュートリアルを表示したかのフラグを取得
    tutorialShowed = SNewsData.getNewsDetailTotorialShowed(this);

    // Get item information
    String categoryTitle = getIntent().getStringExtra(ARG_TITLE);
    mUpdateTime = getIntent().getStringExtra(ARG_UPDATE_TIME);
    List<NewsItem> mNewsList = (List<NewsItem>) getIntent().getSerializableExtra(NewsDetailActivity.ARG_NEWS_LIST);

    // Init toolbar
    Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
    setSupportActionBar(toolbar);

    // UI參照の取得
    this.mImageViewTutorialSwipe = (ImageView) findViewById(R.id.imageViewTutorialSwipe);

    // Init view pager
    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mNewsDetailFragmentPagerAdapter = new NewsDetailFragmentPagerAdapter(getSupportFragmentManager(), NewsDetailActivity.this ,categoryTitle,  mNewsList, mViewPager);
    mTabLayout = (TabLayout) findViewById(R.id.tab);

    // Set action bar
    restoreActionBar();

    // チュートリアル畫像のイベント設定
    // チュートリアルを表示したことが無い場合はアニメーション化して表示
    this.newsUtil = new NewsUtil(this,this.mImageViewTutorialSwipe,true);
    this.newsUtil.setImageViewTutorialEvents();
    if(tutorialShowed == false) {
        //チュートリアル
        this.newsUtil.showTutorialAnimation();
    }

    // Show snack bar
    snackbar = Snackbar.make(findViewById(R.id.viewpager), "AD Space", Snackbar.LENGTH_LONG);
    snackbar.setAction("ACTION", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "ACTION executed", Toast.LENGTH_SHORT).show();
        }
    });
}

/**
 * Resume application
 */
@Override
protected void onResume() {
    snackbar.show();
    super.onResume();
}

/**
 * Set action bar
 */
public void restoreActionBar() {
    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(true);

    // Set action bar title
    String title = getIntent().getStringExtra(ARG_TITLE);
    String category = getIntent().getStringExtra(ARG_CATEGORY);

    if (category != null) {
        actionBar.setTitle(category);
    } else {
        if(title.equals(RANKING_TITLE)) {
            actionBar.setTitle(title + "（" + mUpdateTime + "更新）");
        } else {
            actionBar.setTitle(title);
        }
    }
}

/**
 * onLoad Finished
 * @param adapter
 */
@Override
public void onLoadFinished(NewsDetailFragmentPagerAdapter adapter) {
    String itemId = getIntent().getStringExtra(ARG_ITEM_ID);
    int mDefaultPage = mNewsDetailFragmentPagerAdapter.getPage(itemId);
    mViewPager.setAdapter(mNewsDetailFragmentPagerAdapter);
    mViewPager.setCurrentItem(mDefaultPage);
    mTabLayout.setupWithViewPager(mViewPager);
}
}

NewsDetailFragmentPagerAdapter.javav

public class NewsDetailFragmentPagerAdapter extends FragmentPagerAdapter implements LoaderManager.LoaderCallbacks<Cursor> {

public static final String TAG = "NewsDetailFragmentPagerAdapter";

/**
 * Context view
 */
private Context mContext;

/**
 * View pager
 */
private ViewPager mViewPager;

/**
 * News list
 */
private List<NewsItem> mNewsList;

/**
 * Category title
 */
private String mCategoryTitle;

/**
 * Fragment news list
 */
List<NewsDetailFragment> fragmentList;

/**
 * Check send GA
 */
boolean isSendGa = false;

/**
 * OnLoadListener event
 */
private OnLoadListener mListener;

/**
 * Current selected position
 */
private int mCurrentPosition;

/**
 * Created Fragment List
 */
private WeakHashMap<NewsDetailFragment, Integer> weakHashMapCreatedFragments;

/**
 * Interface OnLoadListener event
 */
public interface OnLoadListener {
    public void onLoadFinished(NewsDetailFragmentPagerAdapter adapter);
}

/**
 * Contractor news detail fragment adapter
 * @param fragmentManager
 * @param context
 * @param categoryTitle
 * @param newsList
 * @param viewPager
 */
public NewsDetailFragmentPagerAdapter(FragmentManager fragmentManager, Context context, String categoryTitle, List<NewsItem> newsList, ViewPager viewPager) {
    super(fragmentManager);
    this.mContext = context;
    this.mCategoryTitle = categoryTitle;
    this.mNewsList = newsList;
    this.mViewPager = viewPager;
    this.weakHashMapCreatedFragments = new WeakHashMap<NewsDetailFragment, Integer>();
    fragmentList = new ArrayList<NewsDetailFragment>();
    try {
        mListener = (OnLoadListener) context;
    } catch (ClassCastException e) {
        throw new ClassCastException(context.toString()
                + " must implement OnLoadListener");
    }
    initLoader();
}

/**
 * Init loader
 */
protected void initLoader() {
    Bundle bundle = new Bundle();
    ((AppCompatActivity) mContext).getSupportLoaderManager().initLoader(0, bundle, this);
}

/**
 * Get position item in a list
 *
 * @param itemId
 * @return
 */
public int getPage(String itemId) {
    int page = 0;
    for (int i = 0; i < mNewsList.size(); i++) {
        if (mNewsList.get(i).getId().equals(itemId)) {
            return page;
        }
        page++;
    }
    return 0;
}

/**
 * Count news detail list
 * @return
 */
@Override
public int getCount() {
    return mNewsList.size();
}

/**
 * Get item by position
 * @param position
 * @return
 */
@Override
public Fragment getItem(int position) {
    // Get current position
    mCurrentPosition = mViewPager.getCurrentItem();

    NewsDetailFragment fragment;

    // フラグメント生成
    fragment = NewsDetailFragment.newInstance(position, mCurrentPosition, mNewsList);
    fragment.setPagerAdapter(this);
    fragment.setHasOptionsMenu(true);

    if (!fragmentList.contains(fragment)) {
        //フォントサイズをかえたときにすべてのページに適用されるようにするために保持する
        fragmentList.add(fragment);
    }

    // 弱參照に作ったフラグメントを追加
    this.weakHashMapCreatedFragments.put(fragment, position);

    return fragment;
}

/**
 * Set detail title
 * @param position
 * @return
 */
@Override
public CharSequence getPageTitle(int position) {
    if (mNewsList.size() > 0) {
        if (mCategoryTitle.equals(NewsDetailActivity.RANKING_TITLE)) {
            return (position + 1) + "位：" + mNewsList.get(position).getTitle();
        } else {
            return mNewsList.get(position).getTitle();
        }
    }
    return null;
}

/**
 * Get fragment list
 * @return
 */
public List<NewsDetailFragment> getFragmentList() {
    return this.fragmentList;
}

/**
 * Set send GA
 * @param isSend
 */
public void setIsSendGA(boolean isSend) {
    this.isSendGa = isSend;
}

/**
 * Check send GA
 * @return
 */
public boolean isSendGA() {
    return this.isSendGa;
}

@Override
public Loader<Cursor> onCreateLoader(int id, Bundle args) {
    return new CursorLoader(mContext.getApplicationContext(), Uri.EMPTY, null, null, null, null);
}

@Override
public void onLoadFinished(Loader<Cursor> loader, Cursor data) {
    this.notifyDataSetChanged();

    mListener.onLoadFinished(this);
}

@Override
public void onLoaderReset(Loader<Cursor> loader) {

}
}

圖片

[IMG] http://i.imgur.com/gjfaPBV.png[/IMG] [IMG] http://i.imgur.com/1JgmRIO.png[/IMG]

請任何人都可以幫助我找出做錯了什么。謝謝。

Answer 1

將您的layout_width設置為wrap_content，將layout_gravity設置為center_horizo​​ntal

<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabMode="scrollable" />