【Android Advanced Training-01】異なる画面に対応[Lesson 3-適切なUIプロセスを実現]
8024 ワード
Implementing Adaptative UI Flows[適応可能なUIプロセスの実現]
Depending on the layout that your application is currently showing, the UI flow may be different. For example, if your application is in the dual-pane mode, clicking on an item on the left pane will simply display the content on the right pane; if it is in single-pane mode, the content should be displayed on its own (in a different activity).
【異なるlayoutを表示することによって、異なるUI flowを設計する必要があります.例えば、APがdual-paneのモードであれば、左listのitemをクリックすると、右側に直接対応するコンテンツが表示され、single-paneのモードであれば、別のActivityにジャンプして正しいコンテンツを表示する必要があります】
注:个人は现在多くのAPが比较的大きいスクリーンに対して1つの対のバージョンを设计すると思って、例えばQQ Pad版、QQ HD版、QQ Pad Mini版、これらの情报は大多数の情况を见ることができて、やはりあまり同じコードを取ってすべてのスクリーンの方案に适応しません.
このレッスンでは、実行時に現在のレイアウトを判断し、APに異なる動作を選択させる方法について説明します.
Determine the Current Layout[現在のレイアウトを判断]
Since your implementation of each layout will be a little different, one of the first things you will probably have to do is determine what layout the user is currently viewing. For example, you might want to know whether the user is in "single pane"mode or "dual pane"mode. You can do that by querying if a given view exists and is visible:
【明らかに、現実的に異なるUI flowの設計のためには、まず、現在使用されているレイアウトを知る必要があります.two-pane or single-paneは、システムが現在の画面に基づいて対応するレイアウトファイルを自動的に表示するためです.】メソッド1:対応するViewが存在するかどうかを問い合せることができ、現在のレイアウトがどの であるかを判断するために表示されます.
public class NewsReaderActivity extends FragmentActivity {
boolean mIsDualPane;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
View articleView = findViewById(R.id.article);
mIsDualPane = articleView != null &&
articleView.getVisibility() == View.VISIBLE;
}
}
方法2:あるコンポーネントが存在するかどうかを判断して必要な操作を実行することができ(例えばtwo-paneの下にcategoryButtonがない[two-paneの下でactionBarに取って代わられるため]、single-paneの下にある)Button catButton = (Button) findViewById(R.id.categorybutton);
OnClickListener listener =/* create your listener here */;
if (catButton != null) {
catButton.setOnClickListener(listener);
}
React According to Current Layout[現在のレイアウトによって異なる反応がある]
Some actions may have a different result depending on the current layout. For example, in the News Reader sample, clicking on a headline from the headlines list opens the article in the right hand-side pane if the UI is in dual pane mode, but will launch a separate activity if the UI is in single-pane mode:
【いくつかの動作は、現在のレイアウトによって異なります.例えば、APがdual-paneのモードであれば、左のlistのitemをクリックすると、右側に直接対応するコンテンツが表示され、single-paneのモードであれば、別のActivityにジャンプしてその内容を表示する必要があります】
@Override
public void onHeadlineSelected(int index) {
mArtIndex = index;
if (mIsDualPane) {
/* display article on the right pane */
mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
} else {
/* start a separate activity */
Intent intent = new Intent(this, ArticleActivity.class);
intent.putExtra("catIndex", mCatIndex);
intent.putExtra("artIndex", index);
startActivity(intent);
}
}
Reuse Fragments in Other Activities[他のActivitiesでFragmentsを再利用]
場合によっては、in the News Reader sample、the news article text is presented in the right side pane on large screens、but is a separate activity on smaller screensなどのコンポーネントを再利用することができます.
In cases like this, you can usually avoid code duplication by reusing the same
[この場合、duplicationを回避するために同じFragmentをいくつかのActivitiesで再利用することができます.例えば、ArticleFragmentはdual-paneのレイアウトに使用されます]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent"/>
small screensに再利用されています
ArticleFragment frag = new ArticleFragment();
getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();
明らかに、このような効果は1つのレイアウトファイルの効果を宣言することと一致することができて、このような情況の下で、レイアウトファイルは実は別のActivityのコンポーネントで、私達は直接繰り返し利用することができます
One very important point to keep in mind when designing your fragments is to not create a strong coupling to a specific activity. You can usually do that by defining an interface that abstracts all the ways in which the fragment needs to interact with its host activity, and then the host activity implements that interface:
[fragmentsを設計するときに覚えておく必要があるのは、特定のactivityに強い結合fragmentを作成しないで、host activityとインタラクティブにインタフェースを定義することができます]
For example, the News Reader app's
public class HeadlinesFragment extends ListFragment {
...
OnHeadlineSelectedListener mHeadlineSelectedListener = null;
/* Must be implemented by host activity */
public interface OnHeadlineSelectedListener {
public void onHeadlineSelected(int index);
}
...
public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
mHeadlineSelectedListener = listener;
}
}
Then, when the user selects a headline, the fragment notifies the listener specified by the host activity (as opposed to notifying a specific hard-coded activity):
[このように、ユーザがトップ項目をクリックすると、このfragmentはhost activityのlistenerに操作を通知し、listenerのonHeadline Selectedメソッドで現在のレイアウトの判断を行い、適切なUIを選択する(右に表示するか別のactivityを表示するか)]
public class HeadlinesFragment extends ListFragment {
...
@Override
public void onItemClick(AdapterView parent,
View view, int position, long id) {
if (null != mHeadlineSelectedListener) {
mHeadlineSelectedListener.onHeadlineSelected(position);
}
}
...
}
Handle Screen Configuration Changes[Handle画面構成の変更]
If you are using separate activities to implement separate parts of your interface, you have to keep in mind that it may be necessary to react to certain configuration changes (such as a rotation change) in order to keep your interface consistent.
[分離activityを使用して異なるモジュールを実装している場合は、UIの連続性を維持するために、現在の構成情報を覚えておく必要があります]
For example, on a typical 7"tablet running Android 3.0 or higher, the News Reader sample uses a separate activity to display the news article when running in portrait mode, but uses a two-pane layout when in landscape mode.
[例えば、3.0以上のシステムを走る7"のタブレットでは、News Readerは縦画面のときに別のactivityを使って文章の詳細を開き、横画面のときにtwo-paneのレイアウト(右側に直接表示)を使う]
public class ArticleActivity extends FragmentActivity {
int mCatIndex, mArtIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
mArtIndex = getIntent().getExtras().getInt("artIndex", 0);
//If should be in two-pane mode, finish to return to main activity
if (getResources().getBoolean(R.bool.has_two_panes)) {
finish();
return;
}
...
}
学習:http://developer.android.com/training/multiscreen/adaptui.html
転載は出典を明記してください:http://blog.csdn.net/kesenhoo、ありがとうございます!
Depending on the layout that your application is currently showing, the UI flow may be different. For example, if your application is in the dual-pane mode, clicking on an item on the left pane will simply display the content on the right pane; if it is in single-pane mode, the content should be displayed on its own (in a different activity).
【異なるlayoutを表示することによって、異なるUI flowを設計する必要があります.例えば、APがdual-paneのモードであれば、左listのitemをクリックすると、右側に直接対応するコンテンツが表示され、single-paneのモードであれば、別のActivityにジャンプして正しいコンテンツを表示する必要があります】
注:个人は现在多くのAPが比较的大きいスクリーンに対して1つの対のバージョンを设计すると思って、例えばQQ Pad版、QQ HD版、QQ Pad Mini版、これらの情报は大多数の情况を见ることができて、やはりあまり同じコードを取ってすべてのスクリーンの方案に适応しません.
このレッスンでは、実行時に現在のレイアウトを判断し、APに異なる動作を選択させる方法について説明します.
Determine the Current Layout[現在のレイアウトを判断]
Since your implementation of each layout will be a little different, one of the first things you will probably have to do is determine what layout the user is currently viewing. For example, you might want to know whether the user is in "single pane"mode or "dual pane"mode. You can do that by querying if a given view exists and is visible:
【明らかに、現実的に異なるUI flowの設計のためには、まず、現在使用されているレイアウトを知る必要があります.two-pane or single-paneは、システムが現在の画面に基づいて対応するレイアウトファイルを自動的に表示するためです.】
public class NewsReaderActivity extends FragmentActivity {
boolean mIsDualPane;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
View articleView = findViewById(R.id.article);
mIsDualPane = articleView != null &&
articleView.getVisibility() == View.VISIBLE;
}
}
方法2:あるコンポーネントが存在するかどうかを判断して必要な操作を実行することができ(例えばtwo-paneの下にcategoryButtonがない[two-paneの下でactionBarに取って代わられるため]、single-paneの下にある)Button catButton = (Button) findViewById(R.id.categorybutton);
OnClickListener listener =/* create your listener here */;
if (catButton != null) {
catButton.setOnClickListener(listener);
}
React According to Current Layout[現在のレイアウトによって異なる反応がある]
Some actions may have a different result depending on the current layout. For example, in the News Reader sample, clicking on a headline from the headlines list opens the article in the right hand-side pane if the UI is in dual pane mode, but will launch a separate activity if the UI is in single-pane mode:
【いくつかの動作は、現在のレイアウトによって異なります.例えば、APがdual-paneのモードであれば、左のlistのitemをクリックすると、右側に直接対応するコンテンツが表示され、single-paneのモードであれば、別のActivityにジャンプしてその内容を表示する必要があります】
@Override
public void onHeadlineSelected(int index) {
mArtIndex = index;
if (mIsDualPane) {
/* display article on the right pane */
mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
} else {
/* start a separate activity */
Intent intent = new Intent(this, ArticleActivity.class);
intent.putExtra("catIndex", mCatIndex);
intent.putExtra("artIndex", index);
startActivity(intent);
}
}
Reuse Fragments in Other Activities[他のActivitiesでFragmentsを再利用]
場合によっては、in the News Reader sample、the news article text is presented in the right side pane on large screens、but is a separate activity on smaller screensなどのコンポーネントを再利用することができます.
In cases like this, you can usually avoid code duplication by reusing the same
Fragment subclass in several activities. For example, ArticleFragment is used in the dual-pane layout:[この場合、duplicationを回避するために同じFragmentをいくつかのActivitiesで再利用することができます.例えば、ArticleFragmentはdual-paneのレイアウトに使用されます]
android:layout_height="fill_parent"
android:orientation="horizontal">
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent"/>
small screensに再利用されています
ArticleFragment frag = new ArticleFragment();
getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();
明らかに、このような効果は1つのレイアウトファイルの効果を宣言することと一致することができて、このような情況の下で、レイアウトファイルは実は別のActivityのコンポーネントで、私達は直接繰り返し利用することができます
One very important point to keep in mind when designing your fragments is to not create a strong coupling to a specific activity. You can usually do that by defining an interface that abstracts all the ways in which the fragment needs to interact with its host activity, and then the host activity implements that interface:
[fragmentsを設計するときに覚えておく必要があるのは、特定のactivityに強い結合fragmentを作成しないで、host activityとインタラクティブにインタフェースを定義することができます]
For example, the News Reader app's
HeadlinesFragment does precisely that:public class HeadlinesFragment extends ListFragment {
...
OnHeadlineSelectedListener mHeadlineSelectedListener = null;
/* Must be implemented by host activity */
public interface OnHeadlineSelectedListener {
public void onHeadlineSelected(int index);
}
...
public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
mHeadlineSelectedListener = listener;
}
}
Then, when the user selects a headline, the fragment notifies the listener specified by the host activity (as opposed to notifying a specific hard-coded activity):
[このように、ユーザがトップ項目をクリックすると、このfragmentはhost activityのlistenerに操作を通知し、listenerのonHeadline Selectedメソッドで現在のレイアウトの判断を行い、適切なUIを選択する(右に表示するか別のactivityを表示するか)]
public class HeadlinesFragment extends ListFragment {
...
@Override
public void onItemClick(AdapterView parent,
View view, int position, long id) {
if (null != mHeadlineSelectedListener) {
mHeadlineSelectedListener.onHeadlineSelected(position);
}
}
...
}
Handle Screen Configuration Changes[Handle画面構成の変更]
If you are using separate activities to implement separate parts of your interface, you have to keep in mind that it may be necessary to react to certain configuration changes (such as a rotation change) in order to keep your interface consistent.
[分離activityを使用して異なるモジュールを実装している場合は、UIの連続性を維持するために、現在の構成情報を覚えておく必要があります]
For example, on a typical 7"tablet running Android 3.0 or higher, the News Reader sample uses a separate activity to display the news article when running in portrait mode, but uses a two-pane layout when in landscape mode.
[例えば、3.0以上のシステムを走る7"のタブレットでは、News Readerは縦画面のときに別のactivityを使って文章の詳細を開き、横画面のときにtwo-paneのレイアウト(右側に直接表示)を使う]
public class ArticleActivity extends FragmentActivity {
int mCatIndex, mArtIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
mArtIndex = getIntent().getExtras().getInt("artIndex", 0);
//If should be in two-pane mode, finish to return to main activity
if (getResources().getBoolean(R.bool.has_two_panes)) {
finish();
return;
}
...
}
学習:http://developer.android.com/training/multiscreen/adaptui.html
転載は出典を明記してください:http://blog.csdn.net/kesenhoo、ありがとうございます!