Clever Geek Handbook

「アイコン化された」メニューを備えたAndroidダイアログボックス

しばらく前、私はAndroidプラットフォーム用のアプリケーションを開発するというアイデアに魅了されました。 単純なハローワールドプログラムでプラットフォームを勉強しないために、フレームワークのUI部分に慣れ、データベース、ネットワーク、ソーシャルサービスを操作できるようにすることを決めました。

アイデアは、愚かさが単純になる前に考え出されたものであり、愚かとも言えます。 そして、何かを始めたとき、突然、アイコン付きのメニュー項目を選択できる美しいダイアログボックスを作成したいと思いました。 このようなダイアログは標準のAndroidに存在します。たとえば、デスクトップを長押しすると、追加するコンテンツ（ウィジェット、壁紙など）を選択するためのダイアログが開きます。 だから猫の下にようこそ...





上記のように、私のタスクは次のようなダイアログボックスを作成することでした。



しばらくグーグルでプラットフォームの公式ドックを読んだ後、そのようなダイアログを実装する方法を見つけることができませんでした。 しばらく掘り下げた後、経験豊富なAndroid開発者には明らかな結果が得られる可能性が高いとわかりました。

答えは簡単で、表面にありました。 その本質は、ダイアログビルダーの場合、適切なデータプロバイダーを置き換えるだけです（当然、プロバイダーは自分で作成する必要があります）。

そのため、現在、何が起こっているかについてのコメント付きのコードがいくつかあります。



可能なアカウントタイプのリスト（プロバイダー）



public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  1. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  2. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  3. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  4. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  5. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  6. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  7. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  8. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



  9. public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .



public final class AccountTypesProvider { public static List<AccountType> accountTypes = Collections.unmodifiableList(Arrays.asList( new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter" , R.drawable.twitter_icon_big), new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook" , R.drawable.facebook_icon_big), new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz" , R.drawable.buzz_icon_big), new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn" , R.drawable.linkedin_icon_big), new AccountType(AccountType.VKONTAKTE_ACOUNT, "" , R.drawable.vkontakte_icon_big) )); } * This source code was highlighted with Source Code Highlighter .





これは、可能なアカウントタイプのリストの単純なラッパーです。 ここでのアカウントのタイプは、このタイプのサービスの識別子（定数）、サービス名、およびアイコンリソース識別子で構成される単純なPOJOクラスです。



指定されたレイアウトでアカウントタイプのリストを表示するためのListAdapter







  1. public final クラス AccountsTypesListAdapterはArrayAdapter <AccountType>を拡張します{
  2. プライベートアクティビティコンテキスト。
  3. プライベートリスト<AccountType> accountTypes;
  5. Public AccountsTypesListAdapter（アクティビティコンテキスト、リスト<AccountType> accountTypes）{
  6. super（コンテキスト、R.layout.select_account_item、accountTypes）;
  8. this .context = context;
  9. this .accountTypes = accountTypes;
  10. }
  12. @Override
  13. public View getView（ int position、View convertView、ViewGroup parent）{
  14. LayoutInflater inflater = context.getLayoutInflater（）;
  15. 行を表示= inflater.inflate（R.layout.select_account_item、parent、 false ）;
  17. TextViewラベル=（TextView）row.findViewById（R.id.text_item）;
  18. label.setText（accountTypes.get（position）.title）;
  20. ImageViewアイコン=（ImageView）row.findViewById（R.id.icon_item）;
  21. icon.setImageResource（accountTypes.get（position）.bigIconId）;
  23. 行を返す ;
  24. }
  25. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




まず、リストアダプターが動作する型のリストをコンストラクターに渡す必要があります。 特定のアイテムのレイアウトへのバインドは、再定義されたgetView（）メソッドで発生します。 指定されたリソースからレイアウトを読み込み、ウィジェットを抽出し、特定のリスト項目に関するデータをウィジェットに書き込みます。 ちなみに、この要素のインデックスは、位置パラメータを介して自動的に利用可能です。



このアダプタシートは、このようなレイアウトで動作します







  1. <？ xml バージョン = "1.0" encoding = "utf-8" ？ >
  2. < LinearLayout xmlns：android = "http://schemas.android.com/apk/res/android"
  3. android：orientation = "horizo​​ntal" android：layout_width = "fill_parent"
  4. android：layout_height = "fill_parent" android：padding = "10px" >
  6. < ImageView android：id = "@ + id / icon_item" android：layout_width = "wrap_content"
  7. android：layout_height = "fill_parent" />
  8. < TextView android：id = "@ + id / text_item" android：layout_width = "wrap_content"
  9. android：layout_height = "fill_parent" android：paddingLeft = "10px"
  10. android：paddingTop = "5px" android：textStyle = "bold"
  11. android：textColor = "＃000000" />
  12. </ LinearLayout >
*このソースコードは、 ソースコードハイライターで強調表示されました。




今残っているのは、開発されたアダプターシートを特定のダイアログボックスにバインドすることです





  1. public static void showSelectAccountTypeDialog（アクティビティコンテキスト、文字列タイトル、OnClickListener dialogListener）{
  2. AlertDialog.Builder builder = new AlertDialog.Builder（コンテキスト）;
  3. builder.setTitle（タイトル）;
  4. builder.setAdapter（ new AccountsTypesListAdapter（context、AccountTypesProvider.accountTypes）、dialogListener）;
  5. builder.create（）。show（）;
  6. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




適切な場所での活動ダイアログを呼び出します





  1. private void displaySelectAccountTypeDialog（）{
  2. ApplicationDialogs.showSelectAccountTypeDialog（ this 、 "Select network" 、 new OnClickListener（）{
  3. @Override
  4. public void onClick（DialogInterface dialogInterface、 int selectedItemId）{
  5. setupAccount（selectedItemId）;
  6. }
  7. }）;
  8. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




ダイアログは、完了後、選択されたアイテムのインデックスをselectedItemIdパラメーターとともに、ダイアログが呼び出されたときに指定されたリスナーに返します。 この単純なケースでは、このインデックスはアカウントタイプID（リスト内のアイテム）と一致するため、追加の変換や抽出は必要ありません。 私のタスクでは、このインデックスは十分です。



その結果、とてもいい会話ができました





たぶん、このトピックで共通の真実を説明しただけかもしれませんが、そうではないかもしれません。 彼らが言うように、あなたに、Habrausersを決定するには...



Androidプラットフォームのエキサイティングな開発プロセスにご参加いただき、ありがとうございます。


More articles:


All Articles