回答:
でカスタムビューを使用するListView
場合は、行レイアウトを定義する必要があります。Androidウィジェットを配置するxmlを作成し、アダプターのコードで次のようなことを行う必要があります。
public MyAdapter(Context context, List<MyObject> objects) extends ArrayAdapter {
super(context, 1, objects);
/* We get the inflator in the constructor */
mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
/* We inflate the xml which gives us a view */
view = mInflater.inflate(R.layout.my_list_custom_row, parent, false);
/* Get the item in the adapter */
MyObject myObject = getItem(position);
/* Get the widget with id name which is defined in the xml of the row */
TextView name = (TextView) view.findViewById(R.id.name);
/* Populate the row's xml with info from the item */
name.setText(myObject.getName());
/* Return the generated view */
return view;
}
詳しくは公式ドキュメントをご覧ください。
View view = convertView; if (view == null) { view = mInflater.... }
LayoutInflater
が何であるかを実際に説明しているとは思いませんが、それをどこで使用するかについて説明しています。答えは1ダウンのほうが良いです。
LayoutInflaterクラスは、それらに対応するビューオブジェクトにレイアウトXMLファイルの内容をインスタンス化するために使用されます。
つまり、XMLファイルを入力として受け取り、そこからViewオブジェクトを作成します。
single_list_item.xml
各行のファイルがあるとしますListView
。そのXMLファイルの使用は、インフレーターのようなものですか?
LayoutInflator
ますか?私が最初にAndroidプログラミングを始めたとき、私はとに本当に混乱しLayoutInflater
ていましたfindViewById
。時々、私たちはどちらか一方を使い、時にはもう一方を使いました。
LayoutInflater
新しいView
(またはLayout
、XMLレイアウトの1つから)オブジェクトます。findViewById
作成済みのビューへの参照を提供するだけです。まだビューを作成していないと思うかもしれませんが、を呼び出すsetContentView
とonCreate
、アクティビティのレイアウトとそのサブビューがバックグラウンドで膨張(作成)されます。したがって、ビューがすでに存在する場合は、を使用しますfindViewById
。そうでない場合は、で作成しますLayoutInflater
。
これは私が作成したミニプロジェクトで、両方の動作LayoutInflater
とfindViewById
動作を示しています。特別なコードがないと、レイアウトは次のようになります。
青い四角はメインレイアウトに挿入されたカスタムレイアウトですinclude
(詳細はこちらを参照)。コンテンツビューの一部であるため、自動的に膨張しました。ご覧のとおり、コードについて特別なことは何もありません。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
次に、カスタムレイアウトの別のコピーをインフレート(作成)して、追加します。
LayoutInflater inflater = getLayoutInflater();
View myLayout = inflater.inflate(R.layout.my_layout, mainLayout, false);
新しいビューレイアウトを膨らませるには、XMLファイルの名前(my_layout
)、追加したい親レイアウト(mainLayout
)、実際にはまだ追加したくない(false
) 。(親をnull
に設定することもできますが、その場合、カスタムレイアウトのルートビューのレイアウトパラメーターは無視されます。)
ここでも、コンテキストに関連しています。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// inflate the main layout for the activity
setContentView(R.layout.activity_main);
// get a reference to the already created main layout
LinearLayout mainLayout = (LinearLayout) findViewById(R.id.activity_main_layout);
// inflate (create) another copy of our custom layout
LayoutInflater inflater = getLayoutInflater();
View myLayout = inflater.inflate(R.layout.my_layout, mainLayout, false);
// make changes to our custom layout and its subviews
myLayout.setBackgroundColor(ContextCompat.getColor(this, R.color.colorAccent));
TextView textView = (TextView) myLayout.findViewById(R.id.textView);
textView.setText("New Layout");
// add our custom layout to the main layout
mainLayout.addView(myLayout);
}
}
findViewById
レイアウトが既に拡張された後にのみ、がどのように使用されるかに注意してください。
上記の例のxmlは次のとおりです。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<!-- Here is the inserted layout -->
<include layout="@layout/my_layout"/>
</LinearLayout>
my_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="5dp"
android:textColor="@android:color/white"
android:text="My Layout"/>
</RelativeLayout>
myLayout
はビューですが、RelativeLayout(my_layout.xmlを参照)として膨らませることもできます。それが膨らんだ後、LinearLayout親(つまり、mainLayout
)のサブビューとして追加します。
LayoutInflater.inflate()は、ビューを定義するres / layout / *。xmlファイルを、アプリケーションのソースコードで使用できる実際のViewオブジェクトに変換する手段を提供します。
基本的な2つのステップ:インフレーターを取得してからリソースを膨らませる
どのようにインフレーターを入手しますか?
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
xmlファイルが「list_item.xml」であると想定して、ビューをどのように取得しますか?
View view = inflater.inflate(R.layout.list_item, parent, false);
これは、前の例と同様の別の例ですが、拡張パラメータとそれが提供できる動的動作をさらに示すために拡張されています。
ListViewの行レイアウトが可変数のTextViewを持つことができると仮定します。したがって、最初にベースアイテムViewを(前の例のように)インフレートし、次に実行時にTextViewを動的に追加してループします。さらにandroid:layout_weightを使用すると、すべてが完全に整列されます。
レイアウトリソースは次のとおりです。
list_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/field1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"/>
<TextView
android:id="@+id/field2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
schedule_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
オーバーライドgetViewメソッドの BaseAdapterクラスの拡張方法を
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = activity.getLayoutInflater();
View lst_item_view = inflater.inflate(R.layout.list_layout, null);
TextView t1 = (TextView) lst_item_view.findViewById(R.id.field1);
TextView t2 = (TextView) lst_item_view.findViewById(R.id.field2);
t1.setText("some value");
t2.setText("another value");
// dinamically add TextViews for each item in ArrayList list_schedule
for(int i = 0; i < list_schedule.size(); i++){
View schedule_view = inflater.inflate(R.layout.schedule_layout, (ViewGroup) lst_item_view, false);
((TextView)schedule_view).setText(list_schedule.get(i));
((ViewGroup) lst_item_view).addView(schedule_view);
}
return lst_item_view;
}
異なるinflateメソッド呼び出しに注意してください。
inflater.inflate(R.layout.list_layout, null); // no parent
inflater.inflate(R.layout.schedule_layout, (ViewGroup) lst_item_view, false); // with parent preserving LayoutParams
このクラスは、レイアウトXMLファイルを対応するView
オブジェクトにインスタンス化するために使用されます。使用する-それは、直接使用されることはありませんされgetLayoutInflater()
たりgetSystemService(String)
、標準的な取得するために、LayoutInflater
すでに現在のコンテキストにフックアップし、正しくあなたが実行しているデバイス用に設定されているインスタンスを。例えば:
LayoutInflater inflater = (LayoutInflater)context.getSystemService
(Context.LAYOUT_INFLATER_SERVICE);
リファレンス:http : //developer.android.com/reference/android/view/LayoutInflater.html
インフレートとは、レイアウト(またはGUI要素)を記述したXMLファイルを読み取り、それに対応する実際のオブジェクトを作成して、Androidアプリ内でオブジェクトを表示することを意味します。
final Dialog mDateTimeDialog = new Dialog(MainActivity.this);
// Inflate the root layout
final RelativeLayout mDateTimeDialogView = (RelativeLayout) getLayoutInflater().inflate(R.layout.date_time_dialog, null);
// Grab widget instance
final DateTimePicker mDateTimePicker = (DateTimePicker) mDateTimeDialogView.findViewById(R.id.DateTimePicker);
このファイルは、date_time_dialog.xmlとして保存できます。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/DateTimeDialog" android:layout_width="100px"
android:layout_height="wrap_content">
<com.dt.datetimepicker.DateTimePicker
android:id="@+id/DateTimePicker" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout android:id="@+id/ControlButtons"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="@+id/DateTimePicker"
android:padding="5dip">
<Button android:id="@+id/SetDateTime" android:layout_width="0dip"
android:text="@android:string/ok" android:layout_weight="1"
android:layout_height="wrap_content"
/>
<Button android:id="@+id/ResetDateTime" android:layout_width="0dip"
android:text="Reset" android:layout_weight="1"
android:layout_height="wrap_content"
/>
<Button android:id="@+id/CancelDialog" android:layout_width="0dip"
android:text="@android:string/cancel" android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
このファイルは、date_time_picker.xmlとして保存できます。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content" `enter code here`
android:padding="5dip" android:id="@+id/DateTimePicker">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="true"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/month_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/month_plus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_up_final"/>
<EditText
android:id="@+id/month_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:focusable="false"
android:gravity="center"
android:singleLine="true"
android:textColor="#000000">
</EditText>
<Button
android:id="@+id/month_minus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_down_final"/>
</LinearLayout>
<LinearLayout
android:id="@+id/date_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0.5dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/date_plus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_up_final"/>
<EditText
android:id="@+id/date_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:focusable="false"
android:inputType="number"
android:textColor="#000000"
android:singleLine="true"/>
<Button
android:id="@+id/date_minus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_down_final"/>
</LinearLayout>
<LinearLayout
android:id="@+id/year_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0.5dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/year_plus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_up_final"/>
<EditText
android:id="@+id/year_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:focusable="false"
android:inputType="number"
android:textColor="#000000"
android:singleLine="true"/>
<Button
android:id="@+id/year_minus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_down_final"/>
</LinearLayout>
<LinearLayout
android:id="@+id/hour_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/hour_plus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_up_final"/>
<EditText
android:id="@+id/hour_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:focusable="false"
android:inputType="number"
android:textColor="#000000"
android:singleLine="true">
</EditText>
<Button
android:id="@+id/hour_minus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_down_final"/>
</LinearLayout>
<LinearLayout
android:id="@+id/min_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0.35dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/min_plus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_up_final"/>
<EditText
android:id="@+id/min_display"
android:layout_width="45dp"
android:layout_height="35dp"
android:background="@drawable/picker_middle"
android:gravity="center"
android:focusable="false"
android:inputType="number"
android:textColor="#000000"
android:singleLine="true"/>
<Button
android:id="@+id/min_minus"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/image_button_down_final"/>
</LinearLayout>
<LinearLayout
android:id="@+id/meridiem_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0.35dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="vertical">
<ToggleButton
android:id="@+id/toggle_display"
style="@style/SpecialToggleButton"
android:layout_width="40dp"
android:layout_height="32dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="45dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:padding="5dp"
android:gravity="center"
android:textOn="@string/meridiem_AM"
android:textOff="@string/meridiem_PM"
android:checked="true"/>
<!-- android:checked="true" -->
</LinearLayout>
</LinearLayout>
</RelativeLayout>
MainActivity
保存されたクラスMainActivity.java:
public class MainActivity extends Activity {
EditText editText;
Button button_click;
public static Activity me = null;
String meridiem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
editText = (EditText)findViewById(R.id.edittext1);
button_click = (Button)findViewById(R.id.button1);
button_click.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view){
final Dialog mDateTimeDialog = new Dialog(MainActivity.this);
final RelativeLayout mDateTimeDialogView = (RelativeLayout) getLayoutInflater().inflate(R.layout.date_time_dialog, null);
final DateTimePicker mDateTimePicker = (DateTimePicker) mDateTimeDialogView.findViewById(R.id.DateTimePicker);
// mDateTimePicker.setDateChangedListener();
((Button) mDateTimeDialogView.findViewById(R.id.SetDateTime)).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mDateTimePicker.clearFocus();
int hour = mDateTimePicker.getHour();
String result_string = mDateTimePicker.getMonth() +" "+ String.valueOf(mDateTimePicker.getDay()) + ", " + String.valueOf(mDateTimePicker.getYear())
+ " " +(mDateTimePicker.getHour()<=9? String.valueOf("0"+mDateTimePicker.getHour()) : String.valueOf(mDateTimePicker.getHour())) + ":" + (mDateTimePicker.getMinute()<=9?String.valueOf("0"+mDateTimePicker.getMinute()):String.valueOf(mDateTimePicker.getMinute()))+" "+mDateTimePicker.getMeridiem();
editText.setText(result_string);
mDateTimeDialog.dismiss();
}
});
// Cancel the dialog when the "Cancel" button is clicked
((Button) mDateTimeDialogView.findViewById(R.id.CancelDialog)).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
mDateTimeDialog.cancel();
}
});
// Reset Date and Time pickers when the "Reset" button is clicked
((Button) mDateTimeDialogView.findViewById(R.id.ResetDateTime)).setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
mDateTimePicker.reset();
}
});
// Setup TimePicker
// No title on the dialog window
mDateTimeDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
// Set the dialog content view
mDateTimeDialog.setContentView(mDateTimeDialogView);
// Display the dialog
mDateTimeDialog.show();
}
});
}
}
インフレーターがすること
(たとえば)入力としてxmlレイアウトを取り、それをViewオブジェクトに変換します。
なぜ必要なのか
カスタムリストビューを作成する必要があるシナリオについて考えてみましょう。これで、各行がカスタムになります。しかし、どうすればできるのでしょうか。リストビューの行にxmlレイアウトを割り当てることはできません。そこで、Viewオブジェクトを作成します。したがって、その中の要素(textview、imageviewなど)にアクセスし、オブジェクトをリストビューの行として割り当てることもできます
したがって、ビュータイプオブジェクトをどこかに割り当てる必要があり、カスタムxmlデザインがある場合は常に、インフレーターによってオブジェクトに変換して使用します。
LayoutInflaterは、Javaプログラムで使用できる対応するビューオブジェクトにレイアウトXMLファイルをインスタンス化するために使用されるクラスです。簡単に言えば、AndroidでUIを作成するには2つの方法があります。1つは静的な方法で、もう1つは動的またはプログラムによる方法です。次のようにtextview
1つと1つを含むシンプルなレイアウトmain.xmlがあるとedittext
します。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/layout1"
>
<TextView
android:id="@+id/namelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter your name"
android:textAppearance="?android:attr/textAppearanceLarge" >
</TextView>
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="14dp"
android:ems="10">
</EditText>
</LinearLayout>
このレイアウトを静的な方法で表示することができます
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ビューを動的に作成する方法とは、ビューがmain.xmlで言及されていないことを意味しますが、実行時に表示したいと考えています。たとえば、footer.xmlとしてレイアウトフォルダーに別のXMLがあります。
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/TextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Add your record"
android:textSize="24sp" >
</TextView>
このテキストボックスを実行時にメインUI内に表示する必要があります。したがって、ここではtext.xmlをインフレートします。方法を見る:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
TextView t = (TextView)inflater.inflate(R.layout.footer,null);
lLayout = (LinearLayout)findViewById(R.id.layout1);
lLayout.addView(t);
ここでは、getSystemService(String)を使用してLayoutInflaterインスタンスを取得しています。以下のようにgetSystemService(String)を使用する代わりに、getLayoutInflator()を使用してインフレートすることもできます。
LayoutInflator inflater = getLayoutInflater();
TextView t = (TextView) inflater.inflate(R.layout.footer, null);
lLayout.addView(t);
私のカスタマイズリストは概念を説明することを願っています
public class second extends ListActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.second);
// TextView textview=(TextView)findViewById(R.id.textView1);
// textview.setText(getIntent().getExtras().getString("value"));
setListAdapter(new MyAdapter(this,R.layout.list_item,R.id.textView1, getResources().getStringArray(R.array.counteries)));
}
private class MyAdapter extends ArrayAdapter<String>{
public MyAdapter(Context context, int resource, int textViewResourceId,
String[] objects) {
super(context, resource, textViewResourceId, objects);
// TODO Auto-generated constructor stub
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater=(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View row=inflater.inflate(R.layout.list_item,parent,false);
String[]items=getResources().getStringArray(R.array.counteries);
ImageView iv=(ImageView) row.findViewById(R.id.imageView1);
TextView tv=(TextView) row.findViewById(R.id.textView1);
tv.setText(items[position]);
if(items[position].equals("unitedstates")){
iv.setImageResource(R.drawable.usa);
}else if(items[position].equals("Russia")){
iv.setImageResource(R.drawable.russia);
}else if(items[position].equals("Japan")){
iv.setImageResource(R.drawable.japan);
}
// TODO Auto-generated method stub
return row;
}
}
}
LayoutInflaterは、XMLで定義されたレイアウトに基づいてViewオブジェクトを作成します。カスタムビューの作成、フラグメントビューのアクティビティビューへの展開、ダイアログの作成、またはレイアウトファイルビューのアクティビティへの展開など、LayoutInflaterの使用方法はいくつかあります。
インフレプロセスがどのように機能するかについては多くの誤解があります。これは、inflate()メソッドのドキュメントが不十分なためと考えられます。inflate()メソッドの詳細を知りたい場合は、ここにブログ記事を書きました。
https://www.bignerdranch.com/blog/understanding-androids-layoutinflater-inflate/
Inflaterは実際には、データ、ビュー、インスタンス、表示可能なUI表現へのある種の変換です。したがって、それは、おそらくアダプターなどからのデータフィードをプログラムで利用します。次に、定義したxmlと統合して、UIでデータをどのように表現するかを指示します