質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

Tablayoutを縦に表示させたいです。

karin10
karin10

総合スコア34

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

1回答

0グッド

0クリップ

575閲覧

投稿2022/10/12 06:45

編集2022/10/12 06:59

実現したいこと

Tablayoutを図の青色表示のように縦に表示させたいです。
イメージ説明

発生している問題・エラーメッセージ

TabItemと画像を全て表示させるためにlayout_widthを約300dpほどとらないといけず、結果的に図のように必要以上のスペースがとられてしまっています。また、rotationを用いてTabLayoutを縦に表示はさせることはできているのですが、TabItemの表示は横表示に戻せずにいます。

イメージ説明

該当のソースコード

XML

1<?xml version="1.0" encoding="utf-8"?> 2<androidx.constraintlayout.widget.ConstraintLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 xmlns:tools="http://schemas.android.com/tools" 6 android:layout_width="match_parent" 7 android:layout_height="match_parent"> 8 9 <!--AppBar 10 @+id/appBar--> 11 <com.google.android.material.appbar.AppBarLayout 12 android:id="@+id/appBar" 13 android:layout_width="match_parent" 14 android:layout_height="wrap_content" 15 android:theme="@style/AppTheme.AppBarOverlay" 16 app:expanded="false"> 17 <androidx.appcompat.widget.Toolbar 18 android:id="@+id/toolbar" 19 android:layout_width="match_parent" 20 android:layout_height="46dp" 21 android:background="@drawable/border_bottom" 22 android:theme="@style/AppTheme.Toolbar" 23 app:titleTextColor="@color/normalTextLight"> 24 25 <LinearLayout 26 android:id="@+id/linearLayoutGuide" 27 android:orientation="vertical" 28 android:layout_width="46dp" 29 android:layout_height="46dp" 30 android:layout_gravity="right" 31 android:padding="5dp" 32 android:background="@drawable/border_left"> 33 <FrameLayout 34 android:id="@+id/frameLayoutGuide" 35 android:layout_width="30dp" 36 android:layout_height="30dp" > 37 <ImageView 38 android:id="@+id/imageViewGuideIc" 39 android:src="@drawable/ic_guide" 40 android:layout_width="24dp" 41 android:layout_height="24dp" 42 android:layout_gravity="center" /> 43 <View 44 android:id="@+id/viewDot" 45 android:layout_width="match_parent" 46 android:layout_height="match_parent"/> 47 <ImageView 48 android:id="@+id/imageViewDot" 49 android:src="@drawable/image" 50 android:layout_width="8dp" 51 android:layout_height="8dp" 52 android:layout_gravity="right|top" 53 android:visibility="invisible"/> 54 </FrameLayout> 55 <TextView 56 android:id="@+id/textViewGuide" 57 android:layout_width="match_parent" 58 android:layout_height="wrap_content" 59 android:layout_marginTop="5dp" 60 android:paddingLeft="5dp" 61 android:text="@string/guide" 62 android:textSize="8dp"/> 63 </LinearLayout> 64 </androidx.appcompat.widget.Toolbar> 65 </com.google.android.material.appbar.AppBarLayout> 66 67 <!--Tab & Content--> 68 <LinearLayout 69 android:id="@+id/linLay_TabContent" 70 android:orientation="horizontal" 71 android:layout_width="match_parent" 72 android:layout_height="wrap_content" 73 android:layout_weight="1" 74 app:layout_constraintStart_toStartOf="parent" 75 app:layout_constraintBottom_toTopOf="@+id/linLay_EventRep" 76 app:layout_constraintTop_toBottomOf="@+id/appBar"> 77 78 <!--Tab & 画像 79 @+id/Tab--> 80 <LinearLayout 81 android:id="@+id/Tab" 82 android:layout_width="300dp" 83 android:layout_height="300dp" 84 android:rotation="-90" 85 app:layout_constraintEnd_toStartOf="@+id/Content"> 86 <com.google.android.material.tabs.TabLayout 87 android:id="@+id/tablayout" 88 android:layout_width="0dp" 89 android:layout_height="match_parent" 90 android:layout_weight="1" 91 app:tabTextColor="@color/normalTextLight" 92 app:tabSelectedTextColor="@color/main" 93 app:tabTextAppearance="@style/TabLayoutTextAppearance" 94 app:tabMinWidth="79dp" 95 app:tabIndicator="@drawable/indicator" 96 app:tabIndicatorColor="@color/main" 97 app:tabMode="scrollable"> 98 99 <com.google.android.material.tabs.TabItem 100 android:text="test1" 101 android:layout_width="match_parent" 102 android:layout_height="wrap_content"/> 103 <com.google.android.material.tabs.TabItem 104 android:text="test2" 105 android:layout_width="match_parent" 106 android:layout_height="wrap_content"/> 107 <com.google.android.material.tabs.TabItem 108 android:text="test3" 109 android:layout_width="match_parent" 110 android:layout_height="wrap_content"/> 111 112 </com.google.android.material.tabs.TabLayout> 113 <ImageButton 114 android:id="@+id/image" 115 android:src="@drawable/image" 116 android:layout_width="60dp" 117 android:layout_height="match_parent" 118 android:background="@color/white" 119 android:layout_marginTop="1dp" 120 android:paddingTop="15dp" 121 android:paddingBottom="15dp" 122 android:paddingRight="19dp" 123 android:paddingLeft="17dp"/> 124 </LinearLayout> 125 126 <!--Content 127 @+id/Content--> 128 <LinearLayout 129 android:id="@+id/Content" 130 android:layout_width="match_parent" 131 android:layout_height="match_parent" 132 133 app:layout_constraintEnd_toEndOf="parent" 134 app:layout_constraintStart_toEndOf="@+id/Tab"> 135 <TextView 136 android:id="@+id/txt1" 137 android:text="Button" 138 android:layout_width="match_parent" 139 android:layout_height="match_parent"/> 140 </LinearLayout> 141 </LinearLayout> 142 143 <LinearLayout 144 android:id="@+id/linLay_EventRep" 145 android:orientation="horizontal" 146 android:layout_width="match_parent" 147 android:layout_height="wrap_content" 148 android:layout_gravity="bottom" 149 app:layout_constraintBottom_toBottomOf="parent"> 150 151 <TextView 152 android:id="@+id/txt1" 153 android:text="Button" 154 android:layout_width="78dp" 155 android:layout_height="48dp" 156 android:background="@drawable/btn_cornerround" 157 android:layout_gravity="bottom"/> 158 159 <TextView 160 android:id="@+id/txt2" 161 android:text="Button" 162 android:layout_width="78dp" 163 android:layout_height="48dp" 164 android:background="@drawable/btn_cornerround" 165 android:layout_gravity="bottom"/> 166 </LinearLayout> 167 168 169 170</androidx.constraintlayout.widget.ConstraintLayout> 171

補足情報(FW/ツールのバージョンなど)

下記リンクで実現したいTabを実装していたのですが、コードで行っている処理が理解できず再現することができませんでした。
https://stackoverflow.com/questions/41422626/vertical-android-tablayout-not-scroll-vertically

TabLayoutを縦にさせるために参考にしたサイト
http://satoshi33.sblo.jp/article/175787565.html

【開発環境】
Microsoft Visual Studio 2019 Version 16.11.19
Microsoft .NET Framework Version 4.8.04084
MonoAndroid, Version=v9.0

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

jimbe

2022/10/12 10:11

前の回答で(レイアウトだけでしたので)タブでは無くリストを使用しましたが、元々タブは水平用に作成されていて、垂直にするにはハックに近いことをしなければなりません。 タブを使用することによる利点が何なのか分かりませんが、ハックによって返って面倒なことになるとも言え、"縦に並んで選択が出来る"リストをタブのように使う/見せるほうが簡単かもしれません。 タブである必要の理由は何でしょうか。
karin10

2022/10/13 01:48

コメントありがとうございます。 縦のタブを作成して欲しいと言われ、一般的なTabLayoutをどうにかしようと考えてました。TabLayoutを垂直方向にするのは困難なんですね。。。 縦タブのように見せる他の方法について、ご存じだったりしますでしょうか?
jimbe

2022/10/13 07:55 編集

iOS は正式にサポートしているようですが、 Android で正式なものは私は知りません。 Android の UI の方向性として必要無いと判断されているものと考えます。 何方かが作成しているのものはありそうですが、調べたこともありません。 >縦タブのように見せる他の方法 タブの目的は、複数の選択肢を表示しながら、選択によって表示を切り替えることです。 ですので、前の回答のようにリスト/リサイクルビューを利用してクリックしたら表示を変えるようにすれば、動作の目的は達成できるのではないでしょうか。 既存のタブレイアウトのように見えるようにするには、リスト/リサイクルビューでの各アイテムの表示を適切に出来れば、ある程度は似せることが出来るのではと思います。(やったことはありません。)
karin10

2022/10/13 10:17

ありがとうございます。 リストとリサイクルビューを用いて試してみます。

回答1

0

自己解決

縦タブの実装は、ボタンを用いて実装することにしました。
下記サイトを参考にしました。
https://stackoverflow.com/questions/7267951/vertical-tabs-in-android/7268225#7268225

図のデータ表示には、Fragmentを表示させています。
InvisibleにしたTabLayoutをFragmentと連動させておき、ボタンが押下されたら指定のTabItemを押下扱いにすることでFragment遷移させ、ボタンで作成したタブを実装しました。

C#

1//タブ押下扱い処理 2 tab = FindViewById<TabLayout>(Resource.Id.tablayout); 3tab.GetTabAt(0).Select();

投稿2022/10/28 01:39

karin10

総合スコア34

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。