2016-03-21 3 views
0

私は(おそらくTabHostを使用して)タブでアクティビティを作成したいの作成についてのヘルプが必要です:は次のようになりますカスタムTabHost

Wanted tabLayout

このレイアウトにも、いくつかのボタン、チェックボックスとGridViewのを持っていますが、私の問題は、私はそれを行う方法を見当もつかないということです

Basic tabLayout

私は、デフォルトで、彼らはこのような何かを見ているので、私は、私は私のタブが次のようになりだろう方法を見つけるために、主に興味いくつかのUIコンポーネントのためのdrawableを以前から作っていましたが、これは別のものです。

答えて

1

かなりの時間がたって、私が望むものを得る方法を考え出しました。タブを作るためのさまざまな方法を試して、最終的にViewPagerでTabLayoutを使用しました。

私は、概念実証を行ったし、それは次のようになります。

enter image description here

誰もがコードに関心がある場合、これは主な活動のレイアウト

<?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"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:weightSum="10"> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="1dp" 
     android:layout_weight="0.2"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tab_layout" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="4" 
     app:tabMode="fixed" 
     app:tabGravity="fill" 
     app:tabPaddingStart="2dp" 
     app:tabPaddingEnd="2dp" 
     app:tabPaddingTop="2dp"/> 

    <Button 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="5.8"/> 

</LinearLayout> 

<android.support.v4.view.ViewPager 
    android:id="@+id/pager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 
</LinearLayout> 

ですMainActivity.java:

import android.graphics.Color; 
import android.net.Uri; 
import android.os.Bundle; 
import android.support.design.widget.TabLayout; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.view.LayoutInflater; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 

public class MainActivity extends AppCompatActivity implements FirstTabFragment.OnFragmentInteractionListener, SecondTabFragment.OnFragmentInteractionListener { 

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

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
    ViewPager viewPager = (ViewPager) findViewById(R.id.pager); 

    tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT); 

    viewPager.setAdapter(new SectionPagerAdapter(getSupportFragmentManager())); 
    tabLayout.setupWithViewPager(viewPager); 

    TabLayout.Tab tab = tabLayout.getTabAt(0); 
    RelativeLayout relativeLayout = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_layout_file1, tabLayout, false); 
    TextView tabTextView = (TextView) relativeLayout.findViewById(R.id.tab_title); 
    tabTextView.setText(tab.getText()); 
    tab.setCustomView(relativeLayout); 

    TabLayout.Tab tab2 = tabLayout.getTabAt(1); 
    RelativeLayout relativeLayout2 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_layout_file2, tabLayout, false); 
    TextView tabTextView2 = (TextView) relativeLayout2.findViewById(R.id.tab_title); 
    tabTextView2.setText(tab2.getText()); 
    tab2.setCustomView(relativeLayout2); 

    tab.select(); 

} 

@Override 
public void onFragmentInteraction(Uri uri) { 

} 

public class SectionPagerAdapter extends FragmentPagerAdapter { 

    public SectionPagerAdapter(FragmentManager fm) { 
     super(fm); 
    } 

    @Override 
    public Fragment getItem(int position) { 
     switch (position) { 
      case 0: 
       return new FirstTabFragment(); 
      case 1: 
      default: 
       return new SecondTabFragment(); 
     } 
    } 

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

    @Override 
    public CharSequence getPageTitle(int position) { 
     switch (position) { 
      case 0: 
       return "First Tab"; 
      case 1: 
      default: 
       return "Second Tab"; 
     } 
    } 
} 
} 

TabLayout1(TabL ayout2は同じであるが、shape2を使用)

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

<TextView 
    android:id="@+id/tab_title" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:background="@drawable/shape1" 
    android:textColor="@android:color/white"/> 

</RelativeLayout> 

形状は単に赤と青の矩形とし、フラグメントは形状と同じ色の背景を持つデフォルト 空の断片です。

関連する問題