web-dev-qa-db-ja.com

ActionBar-中央にImageView、側面にアクションアイテムがあるカスタムビュー

「ホーム」アクティビティのアクションバーに（ImageViewを使用して）カスタムロゴを中央に配置する必要があります。私はこのプロジェクトにABSを使用しています。これは、S.Oに投稿された別の質問と非常に似ています。 （ ActionBarロゴを中央に配置し、アクションアイテムを両側に配置 ）、ただし、探している結果が得られないため、ImageViewまたは検索メニューが違いを生じるかどうかはわかりません（中央に配置します画像）、または私がそれを間違えた場合。基本的に、左側にアイコンを設定し、中央にカスタムビューを挿入し、右側に検索アイコン（OptionsMenu）を配置します。画像はアイコンの少し右側に表示されますが、まだ中央の左側にあります。 ImageViewをアクションバーの中央に配置する方法についてのポインタは大歓迎です。

Home.Java：

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);

    LayoutInflater inflater = (LayoutInflater) getSupportActionBar().getThemedContext()
            .getSystemService(LAYOUT_INFLATER_SERVICE);

    final View customActionBarView = inflater.inflate(
            R.layout.actionbar_custom_view_home, null);

    /* Show the custom action bar view and hide the normal Home icon and title */
    final ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeButtonEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setIcon(R.drawable.ic_ab_som);
    actionBar.setCustomView(customActionBarView);
    actionBar.setDisplayShowCustomEnabled(true);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = new MenuInflater(this);
    inflater.inflate(R.menu.search, menu);
    return true;
}

res/layout/actionbar_custom_view_home.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
Android:orientation="horizontal"
Android:layout_gravity="center">

<ImageView
    Android:id="@+id/actionBarLogo"
    Android:contentDescription="@string/application_name"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:clickable="false"
    Android:duplicateParentState="false"
    Android:focusable="false"
    Android:longClickable="false"
    Android:padding="@dimen/padding_small"
    Android:src="@drawable/logo_horizontal" />

</LinearLayout>

res/menu/search.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item 
        Android:id="@id/search_item"
        Android:icon="?attr/action_search"
        Android:title="@string/search_label"
        Android:showAsAction="ifRoom|collapseActionView">
    </item>
</menu>
androidandroid-actionbaractionbarsherlock
41
Doug Sparling

説明：

enter image description here

ピンクのコンテナは、ビューを追加する実際のスペースです。

トリックは、いくつかの数学を実行して、ビューを（何でも）中央に揃えることです。

私の場合、ビューはTextViewでした。完全な方法は次のとおりです。

public void addTextToActionBar( String textToSet )
{
    mActionbar.setDisplayShowCustomEnabled( true );

    // Inflate the custom view
    LayoutInflater inflater = LayoutInflater.from( this );
    View header = inflater.inflate( R.layout.actionbar_header, null );

    //Here do whatever you need to do with the view (set text if it's a textview or whatever)
    TextView tv = (TextView) header.findViewById( R.id.program_title );
    tv.setText( textToSet );

    // Magic happens to center it.
    int actionBarWidth = DeviceHelper.getDeviceWidth( this ); //Google for this method. Kinda easy.

    tv.measure( 0, 0 );
    int tvSize = tv.getMeasuredWidth();

    try
    {
        int leftSpace = 0;

        View homeButton = findViewById( Android.R.id.home );
        final ViewGroup holder = (ViewGroup) homeButton.getParent();

        View firstChild =  holder.getChildAt( 0 );
        View secondChild =  holder.getChildAt( 1 );

        leftSpace = firstChild.getWidth()+secondChild.getWidth();
    }
    catch ( Exception ignored )
    {}

    mActionbar.setCustomView( header );

    if ( null != header )
    {
        ActionBar.LayoutParams params = (ActionBar.LayoutParams) header.getLayoutParams();

        if ( null != params )
        {
            int leftMargin =  ( actionBarWidth / 2 - ( leftSpace ) ) - ( tvSize / 2 ) ;

            params.leftMargin = 0 >= leftMargin ? 0 : leftMargin;
        }
    }
}

レイアウト：

<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:gravity="center_horizontal|center_vertical|center"
    Android:orientation="horizontal" >

<TextView
    Android:id="@+id/program_title"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:textColor="@Android:color/white"
    Android:contentDescription="@string/content_description_program_title"
    Android:ellipsize="end"
    Android:maxLines="1"
    Android:textSize="22sp"/>

</RelativeLayout>

楽しい。

18
Reinherd

Center of ActionBarでimageviewが必要な場合は、次を使用します。

enter image description here

以下のコードでgetActionBar();をgetSupportActionBar();に置き換えるだけです

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ActionBar actionBar = getActionBar();
        actionBar.setCustomView(R.layout.actionbar_custom_view_home);
        actionBar.setDisplayShowTitleEnabled(false);
        actionBar.setDisplayShowCustomEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

あなたのactionbar_custom_view_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    Android:orientation="horizontal" >

    <ImageView
        Android:id="@+id/actionBarLogo"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:clickable="false"
        Android:focusable="false"
        Android:longClickable="false"
        Android:src="@drawable/ic_launcher" />

</LinearLayout>

Actionbarアイコンを非表示

enter image description here

final ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.actionbar_custom_view_home);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);

注：<11 APIの場合はgetSupportActionBar（）および> 11 APIの場合はgetActionBar（）を使用します

編集済み：02/03/16 Toolbar

<Android.support.v7.widget.Toolbar
   style="@style/ToolBarStyle"
   xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:layout_width="match_parent"
   Android:layout_height="wrap_content"
   Android:background="?attr/colorPrimary"
   Android:minHeight="@dimen/abc_action_bar_default_height_material">

    <ImageView
        Android:layout_width="wrap_content"
        Android:contentDescription="@string/logo"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:src="@drawable/ic_launcher"/>

 </Android.support.v7.widget.Toolbar>
66
Dhaval Parmar

私はこの問題に遭遇しました、ここに私の解決策があります：

   ActionBar.LayoutParams layoutParams = new  ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, 
ActionBar.LayoutParams.MATCH_PARENT);
   layoutParams.gravity = Gravity.CENTER_HORIZONTAL|Gravity.CENTER_HORIZONTAL;
    actionBar.setCustomView(yourCustomView,layoutParams);
6
jeason_tse

コード内のImageViewは、アクションバーではなく、LinearLayoutを基準にして中央に配置されます。左マージン（Android：layout_marginLeft）をレイアウトに追加して、画像の位置を調整できます。

他の方法は、アイコンとアクションアイテムをアクションバーに追加するのではなく、アイコンとボタンが内部にあるカスタムレイアウトを使用することです。ただし、その場合はアクションアイテムを自分で処理する必要があります。

3
Const

私が働いていることがわかった唯一のものは、置くことです（必要に応じて右または左、またはその両方を置く）：

Android:layout_marginLeft|Right="?attr/actionBarSize"

私がここで見つけた： http://sourcey.com/Android-custom-centered-actionbar-with-material-design/

2
walla

私は同じ問題に直面しているので、次の解決策を提案します。

  1. res/layout/actionbar_custom_view_home.xmlでレイアウトの幅をwrap_contentに変更します。

    Android:layout_width="wrap_content"

  2. 次のようなアクションバーの幅を取得します。

    Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
//width of action bar is the same as width of whole screen
final int actionBarWidth = size.x;

  3. LayoutListenerをcustomActionBarViewに追加します。

    customActionBarView.addOnLayoutChangeListener(
  new OnLayoutChangeListener() {

    @Override
    public void onGlobalLayout() {
      float x = customActionBarView.getX();
      int logoImageWidth = imageLogo.getWidth();
      int logoPosition = actionBarWidth / 2 - logoImageWidth / 2;
      if (x != logoPosition) {
        customActionBarView.setX(logoPosition);
        customActionBarView.requestLayout();
      } else {
        customActionBarView.removeOnLayoutChangeListener(this);
      }
    }
  }
);
2
Alexey Osminin

パーティーに遅刻しますが、それが他の誰かに役立つ場合-レイヤーリストを使用して、それを背景として設定します。それ以外の場合、Reinherdが述べているように、ツールバー全体ではなく、残りのスペースに基づいてロゴが中央に配置されます。

静的な背景色のレイヤーリストと、次のように重力を中央に設定した画像を使用できます。それが役に立てば幸い！

toolbar.axml

<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="@drawable/toolbar_background"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_collapseMode="pin">
</Android.support.v7.widget.Toolbar>

toolbar_background.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item>
    <shape Android:shape="rectangle">
      <solid Android:color="@color/colorPrimary" />
    </shape>
  </item>
  <item>
    <bitmap Android:src="@drawable/logo" Android:gravity="center" />
  </item>
</layer-list>
2
Blueberry