web-dev-qa-db-ja.com

Androidのカスタムボタンでカスタムアクションバーを実装するにはどうすればよいですか？

次のようなカスタムActionBarを実装する必要があります。

enter image description here

だから質問：

  1. カスタムビューのようなボタンを実装するにはどうすればよいですか？
  2. ActionBarの上に線を引くにはどうすればよいですか？
  3. そして、どのように区切り線なしでボタンを実装できますか：ActionBarまたは何にタブを追加しますか？
javaandroidandroid-actionbar
60
MainstreamDeveloper00

enter image description here

これは、ActionBar AP​​Iを使用する場合に得られるものとほぼ同じです。変なActionBarハッキングを行わずにWindowの上にカラーストリップを配置できるかどうかはわかりませんが、トラブルに見合う価値はありません。 MenuItemsを変更する限り、スタイルを使用してそれらをよりタイトにすることができます。それはこのようなものですが、私はそれをテストしていません。

<style name="MyTheme" parent="Android:Theme.Holo.Light">
    <item name="actionButtonStyle">@style/MyActionButtonStyle</item>
</style>

<style name="MyActionButtonStyle" parent="Widget.ActionButton">
    <item name="Android:minWidth">28dip</item>
</style>

カスタムレイアウトをActionBarに展開して追加する方法は次のとおりです。

    // Inflate your custom layout
    final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(
            R.layout.action_bar,
            null);

    // Set up your ActionBar
    final ActionBar actionBar = getActionBar();
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setCustomView(actionBarLayout);

    // You customization
    final int actionBarColor = getResources().getColor(R.color.action_bar);
    actionBar.setBackgroundDrawable(new ColorDrawable(actionBarColor));

    final Button actionBarTitle = (Button) findViewById(R.id.action_bar_title);
    actionBarTitle.setText("Index(2)");

    final Button actionBarSent = (Button) findViewById(R.id.action_bar_sent);
    actionBarSent.setText("Sent");

    final Button actionBarStaff = (Button) findViewById(R.id.action_bar_staff);
    actionBarStaff.setText("Staff");

    final Button actionBarLocations = (Button) findViewById(R.id.action_bar_locations);
    actionBarLocations.setText("HIPPA Locations");

カスタムレイアウトは次のとおりです：

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:enabled="false"
    Android:orientation="horizontal"
    Android:paddingEnd="8dip" >

    <Button
        Android:id="@+id/action_bar_title"
        style="@style/ActionBarButtonWhite" />

    <Button
        Android:id="@+id/action_bar_sent"
        style="@style/ActionBarButtonOffWhite" />

    <Button
        Android:id="@+id/action_bar_staff"
        style="@style/ActionBarButtonOffWhite" />

    <Button
        Android:id="@+id/action_bar_locations"
        style="@style/ActionBarButtonOffWhite" />

</LinearLayout>

ここにカラーストリップレイアウトがあります：使用するには、mergeで展開するレイアウトでsetContentViewを使用します。

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/colorstrip"
    Android:background="@Android:color/holo_blue_dark" />

ここにButtonスタイルがあります：

<style name="ActionBarButton">
    <item name="Android:layout_width">wrap_content</item>
    <item name="Android:layout_height">wrap_content</item>
    <item name="Android:background">@null</item>
    <item name="Android:ellipsize">end</item>
    <item name="Android:singleLine">true</item>
    <item name="Android:textSize">@dimen/text_size_small</item>
</style>

<style name="ActionBarButtonWhite" parent="@style/ActionBarButton">
    <item name="Android:textColor">@color/white</item>
</style>

<style name="ActionBarButtonOffWhite" parent="@style/ActionBarButton">
    <item name="Android:textColor">@color/off_white</item>
</style>

私が使用した色と寸法は次のとおりです：

<color name="action_bar">#ff0d0d0d</color>
<color name="white">#ffffffff</color>
<color name="off_white">#99ffffff</color>

<!-- Text sizes -->
<dimen name="text_size_small">14.0sp</dimen>
<dimen name="text_size_medium">16.0sp</dimen>

<!-- ActionBar color strip -->
<dimen name="colorstrip">5dp</dimen>

これ以上カスタマイズしたい場合は、ActionBarをまったく使用しないことを検討してください。しかし、それはお勧めしません。 Android Design Guidelines を読んで、ActionBar.を設計する方法についてより良いアイデアを得ることができます。

ActionBarを放棄し、代わりに独自のレイアウトを使用する場合は、ユーザーが「MenuItems」を長押ししたときにアクション可能なToastsを追加する必要があります。これは簡単に実現できます この要点を使用して 。

146
adneal

1ドロアブルを使用できます

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@+id/menu_item1"
        Android:icon="@drawable/my_item_drawable"
        Android:title="@string/menu_item1"
        Android:showAsAction="ifRoom" />
</menu>

2アクションバーのスタイルを作成し、カスタム背景を使用します。

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActivityTheme" parent="@Android:style/Theme.Holo">
        <item name="Android:actionBarStyle">@style/MyActionBar</item>
        <!-- other activity and action bar styles here -->
    </style>
    <!-- style for the action bar backgrounds -->
    <style name="MyActionBar" parent="@Android:style/Widget.Holo.ActionBar">
        <item name="Android:background">@drawable/background</item>
        <item name="Android:backgroundStacked">@drawable/background</item>
        <item name="Android:backgroundSplit">@drawable/split_background</item>
    </style>
</resources>

3スタイル再びAndroid：actionBarDivider

Androidドキュメント はそのために非常に便利です。

3
JEY

Menu.xmlファイルに次のコードを記述してください。

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
      xmlns:my_menu_tutorial_app="http://schemas.Android.com/apk/res-auto"
      xmlns:tools="http://schemas.Android.com/tools"
      tools:context="com.example.mymenus.menu_app.MainActivity">
<item Android:id="@+id/item_one"
      Android:icon="@drawable/menu_icon"
      Android:orderInCategory="l01"
      Android:title="Item One"
      my_menu_tutorial_app:showAsAction="always">
      <!--sub-menu-->
      <menu>
          <item Android:id="@+id/sub_one"
                Android:title="Sub-menu item one" />
          <item Android:id="@+id/sub_two"
                Android:title="Sub-menu item two" />
      </menu>

また、アクティビティクラスファイルに次のJavaコードを記述します。

public boolean onOptionsItemSelected(MenuItem item)
{
    super.onOptionsItemSelected(item);
    Toast.makeText(this, "Menus item selected: " +
        item.getTitle(), Toast.LENGTH_SHORT).show();
    switch (item.getItemId())
    {
        case R.id.sub_one:
            isItemOneSelected = true;
            supportInvalidateOptionsMenu();
            return true;
        case MENU_ITEM + 1:
            isRemoveItem = true;
            supportInvalidateOptionsMenu();
            return true;
        default:
            return false;
    }
}

これは、アクションバーにメニューを表示する最も簡単な方法です。

1
Sukesha Kumar