TabHost のタブの切り替わりがあまりにもそっけないので、slide_from_bottom.xml と slide_up.xml を作成して、下から上へと移動するアニメーションを設定しました。左右にしてもいいのですが、それだともう二種類のアニメーションが必要になりそうなので下から上にしました。 Interpolators の値(Android developer) ※ 参考にした記事 TabHost 内の各 TabSpec 内にある TextView の 端末回転時における保存と復帰 では、tab 毎に違った画面を定義しましたが、同じ画面を使用して工数が減るパターンとしてサンプルを作成しました。 ただ、この場合ですと、端末の回転による Activity の再作成で、Tab 内の EditText の保存と復帰が正しくされないので、AndroidMainfest で『回転しない』ように縦固定にしました。
public class MainActivity extends AppCompatActivity {
private TabHost tabhost;
private View pview;
private View tabView1;
private View tabView2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// TabHost のインスタンスを取得
tabhost = (TabHost)MainActivity.this.findViewById(R.id.tabHost);
// タブ追加の前に必要な初期処理
tabhost.setup();
// タブ用のインスタンスを作成
TabHost.TabSpec tab1 = tabhost.newTabSpec("tab1");
// タイトル文字列を設定
tab1.setIndicator("タブ1の\nタイトル");
// このタブ内に表示するコンテンツを TabHost 画面内の FrameLayout
// の中にあるうちのコンテンツのひとつを設定
tab1.setContent(R.id.linearLayout1);
// TabHost に このタブを追加
tabhost.addTab(tab1);
TabHost.TabSpec tab2 = tabhost.newTabSpec("tab2");
tab2.setIndicator("タブ2の\nタイトル");
tab2.setContent(R.id.linearLayout2);
tabhost.addTab(tab2);
TabHost.TabSpec tab3 = tabhost.newTabSpec("tab3");
tab3.setIndicator("タブ3の\nタイトル");
tab3.setContent(R.id.linearLayout3);
tabhost.addTab(tab3);
pview = tabhost.getCurrentView();
tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
View currentView = tabhost.getCurrentView();
int tab = tabhost.getCurrentTab();
Animation a_out = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_up);
Animation a_in = AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_from_bottom);
pview.setAnimation(a_out);
currentView.setAnimation(a_in);
pview = currentView;
}
});
// tab1 内のボタン
tabView1 = MainActivity.this.findViewById(R.id.linearLayout1);
Button button1;
button1 = (Button) tabView1.findViewById(R.id.button);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TextView tv;
// 画面最上部の TextView
tv = (TextView) MainActivity.this.findViewById(R.id.textView);
// 最初のタブの EditText
EditText editText = (EditText) tabView1.findViewById(R.id.editText);
tv.setText(editText.getText().toString());
// tab1 のコンテンツを取得
tv = (TextView) tabView1.findViewById(R.id.textView2);
tv.setText(editText.getText().toString());
}
});
// tab2 内のボタン
tabView2 = MainActivity.this.findViewById(R.id.linearLayout2);
Button button2;
button2 = (Button) tabView2.findViewById(R.id.button);
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TextView tv;
// 真ん中のタブの EditText
EditText editText = (EditText) tabView2.findViewById(R.id.editText);
// tab2 のコンテンツを取得
tv = (TextView) tabView2.findViewById(R.id.textView2);
tv.setText(editText.getText().toString());
}
});
}
}
画面定義
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="lightbox.july.tabhostapplication.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:textSize="30dp"/>
<TabHost
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tabHost"
android:layout_below="@+id/textView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/tab_entry"/>
<include
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/tab_entry"/>
<include
android:id="@+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/tab_entry"/>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/textView2"
android:textSize="40dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="入力を表示"
android:id="@+id/button"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText"/>
</LinearLayout>
※ 便宜的に二つの画面をまとめて表示しています AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest package="lightbox.july.tabhostapplication"
xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
アニメーション
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromYDelta="50%p" android:toYDelta="0" android:duration="160"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="160" />
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0" android:toYDelta="-50%p" android:duration="@android:integer/config_mediumAnimTime"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="200" />
</set>
※ 便宜上ひとつにして表示しています ※ 上が、slide_from_bottom.xml です
|
|
【Android Studio 2の最新記事】
- Android : WebView 経由のデータベースアプリケーション
- Android で WebView を使ってWEBにあるデータベースのデータを取得する為のクラス
- WebView で JavaScript にデータを渡したい時に注意する事
- シンプル Android Data Binding : Android Studio 2.2 / 古い定義との違いと、以前のプロジェクトでエラーが出る場合の対処
- Android Studio で、ListView アプリケーションを作成するテンプレート
- Android : Data Binding で ListView へのデータ表示を凄く簡単にする
- Android Studio で理解不能なエラーが出た時の対処方法 : Invalidate Caches / Restart
- Android : TabHost 内の各 TabSpec 内にある TextView の 端末回転時における保存と復帰
- Android の 端末回転時の EditText と TextView の違い
- ViewPager 内のイベントで設定した TextView の値を保持する Fragment 処理
- ExpandableListView を使用して、タップした時に明細データ表示する
- カスタム・リストビュー・ダイアログ : DialogFragment 内の ListView を ArrayAdapter でカスタムする
- カスタム・リストビュー・ダイアログ : ダイアログ内の ListView を ArrayAdapter でカスタムする
- AlertDialog.Builder の setItems(int itemsId, DialogInterface .OnClickListener listener) を使用した、ListVie..
- AsyncTask<Params, Progress, Result> の Progress を無しにして、onPostExecute 内の処理を interface を使って MainA..
- javamail-android + AsyncTask でメール送信を行う為のテンプレート
- tools.jar の callHttpGet のテストと include による画面再利用と HttpPost クラスで掲示板書き込み / Android Studio
- Android の Spinner に関するいろいろな実装と知識 / Android Studio
- AsyncTask を継承して、Drawable を取得する専用クラスを作成する : Android Studio
- Android Studio が 2.0 になりました。前からの内容も含めて整理してます。
