2015-10-20 56 views
10

Tôi mới phát triển Android và tôi gặp vấn đề lớn với việc tạo thanh công cụ tùy chỉnh. Yêu cầu của tôi:Làm cách nào để tạo thanh công cụ bằng nút tùy chỉnh ở bên trái?

  1. Tuỳ chỉnh nút bên trái (biểu tượng dấu + text)
  2. Divider sau nút tùy chỉnh
  3. Buttons chiều cao nên được giống như thanh công cụ (không lề)

Đây là mẫu hình ảnh giải thích các yêu cầu của tôi: enter image description here

Tôi đã cố gắng sử dụng actionBar.setCustomView(v); nhưng nó không giải quyết được sự cố của tôi:

  1. nút phải có đầu lề/dưới - họ là nhỏ hơn so với thanh công cụ
  2. tôi đã không thể để thêm chia.
  3. Nút bên trái (từ chế độ xem tùy chỉnh) nhỏ hơn chiều cao thanh công cụ.

Câu hỏi của tôi:

  1. Tôi có thực sự cần xem tùy chỉnh để thêm nút tùy chỉnh trên bên trái?
  2. Cách thêm dải phân cách ở bên trái?
  3. Làm cách nào để làm cho các nút có chiều cao giống như chiều cao thanh công cụ?
+0

bạn đã có bất kỳ cơ hội để thử nghiệm các giải pháp cung cấp? – reVerse

Trả lời

23

Toolbar về cơ bản là FrameLayout để bạn có thể thêm bên trong thẻ bố cục bất cứ điều gì bạn muốn. Trong trường hợp của bạn giống như sau có vẻ đầy đủ:

Layout.xml

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="?actionBarSize" 
    android:background="?colorPrimary" 
    app:contentInsetLeft="0dp" 
    app:contentInsetStart="0dp" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="?attr/actionBarSize" 
     android:divider="@drawable/divider" 
     android:dividerPadding="8dp" 
     android:orientation="horizontal" 
     android:showDividers="end"> 

     <TextView 
      android:id="@+id/toolbar_save" 
      style="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="?attr/selectableItemBackground" 
      android:drawableLeft="@drawable/ic_action_check" 
      android:drawablePadding="8dp" 
      android:gravity="center_vertical" 
      android:paddingLeft="16dp" 
      android:paddingRight="16dp" 
      android:text="Save" 
      android:textAllCaps="true" /> 

    </LinearLayout> 
</android.support.v7.widget.Toolbar> 

divider.xml

Thêm phần này vào thư mục /res/drawable của bạn. Điều này được sử dụng làm bộ chia LinearLayout trong mã ở trên.

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <size android:width="1dp" /> 

    <solid android:color="@android:color/white" /> 

</shape> 

private void setupToolbar() { 
    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); 
    setSupportActionBar(mToolbar); 
    // Hide the title 
    getSupportActionBar().setTitle(null); 
    // Set onClickListener to customView 
    TextView tvSave = (TextView) findViewById(R.id.toolbar_save); 
    tvSave.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      // TODO 
     } 
    }); 
} 

Về các mục ở bên phải: Đơn giản chỉ cần sử dụng phương pháp mặc định onCreateOptionsMenu và thổi phồng những R.menu.* tài nguyên tương ứng.

quả

result image

+1

ứng dụng: contentInsetStart = "0dp" điều này đã giải quyết được sự cố của tôi – umesh

0
<android.support.v7.widget.Toolbar 
     android:layout_width="match_parent" 
     android:layout_height="?actionBarSize" 
     app:contentInsetLeft="0dp" 
     app:contentInsetStart="0dp" 
     app:contentInsetStartWithNavigation="0dp" 
     /> 

Bạn cũng cần ứng dụng: contentInsetStartWithNavigation = "0dp" để Thanh công cụ

Các vấn đề liên quan