![イメージ説明]WIDTH:600![![![![イメージ]WIDTH:320]WIDTH:600説明]WIDTH:320説明]WIDTH:320]WIDTH:320```lang-java
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
ViewPager viewPager;
TabHost tabHost;
View indicator;
TabWidget tabWidget;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //マテリアルデザインの作業 tabWidget = (TabWidget) findViewById(android.R.id.tabs); tabWidget.setStripEnabled(false); tabWidget.setShowDividers(LinearLayout.SHOW_DIVIDER_NONE); indicator = findViewById(R.id.indicator); tabHost = (TabHost) findViewById(android.R.id.tabhost); tabHost.setup(); getActionBar().setElevation(0); //TabとActionBarとの間の影を消す float elevation = 4 * getResources().getDisplayMetrics().density; tabHost.setElevation(elevation); //PagerとTabの設定 ViewPagerAdapter vpa = new ViewPagerAdapter(getSupportFragmentManager()); viewPager = (ViewPager) findViewById(R.id.pager); viewPager.setAdapter(vpa); viewPager.setOnPageChangeListener(new PageChangeListener()); for (int i = 0; i < vpa.getCount(); i++) { tabHost.addTab(tabHost .newTabSpec(String.valueOf(i)) .setIndicator(vpa.getPageTitle(i)) .setContent(android.R.id.tabcontent)); } LayoutInflater inflater = LayoutInflater.from(this); for (int i = 0; i < vpa.getCount(); i++) { TextView tv = (TextView) inflater.inflate(R.layout.tab_widget, tabWidget, false); tv.setText(vpa.getPageTitle(i)); tabHost.addTab(tabHost .newTabSpec(String.valueOf(i)) .setIndicator(tv) .setContent(android.R.id.tabcontent)); } tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { viewPager.setCurrentItem(Integer.valueOf(tabId)); } }); viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { super.onPageSelected(position); tabHost.setCurrentTab(position); } }); } private class PageChangeListener implements ViewPager.OnPageChangeListener { private int scrollingState = ViewPager.SCROLL_STATE_IDLE; @Override public void onPageSelected(int position) { // スクロール中はonPageScrolled()で描画するのでここではしない if (scrollingState == ViewPager.SCROLL_STATE_IDLE) { updateIndicatorPosition(position, 0); } tabWidget.setCurrentTab(position); } @Override public void onPageScrollStateChanged(int state) { scrollingState = state; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { updateIndicatorPosition(position, positionOffset); } private void updateIndicatorPosition(int position, float positionOffset) { View tabView = tabWidget.getChildTabViewAt(position); int indicatorWidth = tabView.getWidth(); int indicatorLeft = (int) ((position + positionOffset) * indicatorWidth); final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) indicator.getLayoutParams(); layoutParams.width = indicatorWidth; layoutParams.setMargins(indicatorLeft, 0, 0, 0); indicator.setLayoutParams(layoutParams); } }
}
このコードで、下の写真のようなtabを作りたいのですが、上のようになってしまします。どうしてでしょう? レイアウトはこちらです。 res/layout/activity_main.xml ```lang-ja <LinearLayout 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:orientation="vertical" tools:context=".MainActivity"> <TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:attr/colorPrimary"> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" /> <View android:id="@+id/indicator" android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="bottom" android:background="?android:attr/colorControlActivated" /> </TabHost> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </LinearLayout>
res/layout/left_view_fragment.xml
lang
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:textSize="30sp" 11 android:text="Left Fragment" /> 12 13</LinearLayout>
res/layout/center_view_fragment
lang
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:textSize="30sp" 11 android:text="Center Fragment" /> 12 13</LinearLayout>
res/layout/right_view_fragment.xml
lang
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:textSize="30sp" 11 android:text="Right Fragment" /> 12 13</LinearLayout>
res/layout/tab_widget
lang
1<?xml version="1.0" encoding="utf-8"?> 2<TextView xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="0dp" 5 android:layout_height="match_parent" 6 android:layout_weight="1" 7 android:gravity="bottom|center_horizontal" 8 android:paddingBottom="16dp" 9 android:textColor="@color/tab_widget_text" 10 android:textSize="14sp" 11 tools:layout_width="match_parent" 12 tools:text="group 1 ITEM TWO" />
res/color/tab_widget_text.xml
lang
1<?xml version="1.0" encoding="utf-8"?> 2<selector xmlns:android="http://schemas.android.com/apk/res/android"> 3 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 4 <item android:color="#FFFFFFFF" android:state_selected="true" /> 5 <item android:color="#99FFFFFF" /> 6 </selector> 7</selector>
あなたの回答
tips
プレビュー