[英]Add Icon to the left of the title in the action bar in android
我想在操作欄的標題左側添加一個可點擊的圖標/按鈕。 怎么做? 以下是我已將搜索和設置圖標添加到操作欄的代碼。 它們出現在右邊。 但我想在標題左側添加一個新圖標。 怎么做? XML:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".ui.home.activities.TransactionSearchActivity">
<item
android:id="@+id/action_search"
android:icon="@android:drawable/ic_menu_search"
android:title="search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always" />
<item android:id="@+id/action_setting"
android:title="categories"
android:icon="@drawable/icon_settings_h"
app:showAsAction="always"
/>
主要活動
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}
您可以使用以下代碼在左側顯示圖標。
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME |
ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_HOME_AS_UP | ActionBar.DISPLAY_USE_LOGO);
actionBar.setIcon(R.drawable.ic_launcher);
但它不會被點擊。 要在左側創建可點擊圖標,您需要使用工具欄而不是操作欄。
您可以執行以下操作:
1-創建file_name.xml然后添加Toolbar
。
2-在Toolbar
的標簽內添加RelativeLayout
。
3-添加您的視圖,即( ImageButton
, TextView
,...)
注意:您要添加的TextView
是Toolbar
的標題。
示例代碼: file_name.xml
<android.support.v7.widget.Toolbar
android:id="@+id/products_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimaryDark"
app:layout_collapseMode="pin"
app:titleTextColor="@android:color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Title"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="20dp"
android:textStyle="bold"
android:layout_alignParentStart="true"/>
<ImageButton
android:id="@+id/toolbar_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_icon_24dp"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
輸出:
推薦方式
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_settings_24dp);// set drawable icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
處理圖標點擊事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
Toast.makeText(this, "click..!!", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
有一件事是默認標題和應用程序圖標設置在左側,而不是圖標發送到右側。 如果您想將圖標添加到左側,則可以通過以下方式將它們添加到左側:
步驟1.創建一個自定義布局,其中包含搜索,設置圖標和您想要的標題。
第2步。創建一個toolBar布局,如:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:titleTextColor="#ffffff"
android:background="#ECA539"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
第3步。將自定義布局擴展到工具欄中,如:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initToolbar();
}
private void initToolBar() {
setSupportActionBar(toolbar);
View customlayout= getLayoutInflater().inflate(R.layout.custom_layout, null);
toolbar.addView(logo);
}
您可以通過以下方式替換默認導航圖標(和原因按鈕)。
在XML中使用工具欄定義通常的UI:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<!-- Here goes your UI -->
</LinearLayout>
然后在onCreate方法中將工具欄設置為ActionBar
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true); // Make toolbar show navigation button (i.e back button with arrow icon)
toolbar.setNavigationIcon(R.drawable.custom_icon); // Replace arrow icon with our custom icon
}
在onOptionsItemSelected方法中處理返回導航按鈕:
@Override
public boolean onOptionsItemSelected(MenuItem menuItem) {
if (menuItem.getItemId() == android.R.id.home) {
// Do whatever you want
return true;
}
return super.onOptionsItemSelected(menuItem);
}
Kotlin也一樣
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true) // Important step, we enable button on the left side of the toolbar
toolbar.navigationIcon = getDrawable(R.drawable.custom_icon) // Here we change default navigation button icon
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
android.R.id.home -> {
doSomething() // Here we can perform any action
true
}
else -> super.onOptionsItemSelected(item)
}
}
private fun doSomething() {
Toast.makeText(this, "Hello", Toast.LENGTH_LONG).show()
}
}
由於這是Android的更新時代,您必須使用工具欄,以便您可以在xml的幫助下進行任何類型的自定義。 而不是使用菜單我建議使用工具欄
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#ffffa302"
android:minHeight="@android:dimen/notification_large_icon_height">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButton"
android:layout_gravity="left"
android:drawable="@drawable/pinterest_pin"
android:clickable="true"/>
</android.support.v7.widget.Toolbar>
通過代碼,您可以處理事件
我總是想放一個AppBarLayout,我可以控制工具欄的顯示方式
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbarAddPlan"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_marginLeft="50dp"
app:popupTheme="@style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
<ImageButton
android:id="@+id/btnAddPlanTourClose"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="@drawable/close_circle_outline" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
這樣,一個可以放置更多的元素,並按我想要的方式排列它們。 在這種情況下,插入左圖標以通過片段關閉活動。
所以在片段中這樣做
//That is in the Fragment
setupToolbar(R.id.toolbarAddPlan,getString(R.string.addPlanTour),true)
//It is in na Kotlin Extansion file.
inline fun Fragment.setupToolbar(@IdRes id: Int, title:String?= null, upNavigation: Boolean = false) : ActionBar {
val activityCompat = activity as AppCompatActivity
val toolbar = activity?.findViewById<Toolbar>(id)
activityCompat.setSupportActionBar(toolbar)
if(title != null){
activityCompat.supportActionBar?.title = title
}
activityCompat.supportActionBar?.setHomeButtonEnabled(true)
return activityCompat.supportActionBar!!
}
結果將是這樣的:
動作“SALVAR”我通過inflat菜單
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
super.onCreateOptionsMenu(menu, inflater)
inflater?.inflate(R.menu.menu_add_plan_tour,menu)
}
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
return when (item?.itemId){
R.id.menuPlanTourSave ->{
true
}else ->return super.onOptionsItemSelected(item)
}
}
菜單XML布局src / menu / menu_add_plan_tour.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- "Mark Favorite", should appear as action button if possible -->
<item
android:id="@+id/menuPlanTourSave"
android:title="@string/btnSave"
android:tooltipText="@string/btnSave"
android:contentDescription="@string/btnSave"
app:showAsAction="always|withText">
<TextView
android:text="@string/btnSave"
android:textSize="15dp"
android:textColor="@color/colorPrimaryLight"
/>
</item>
</menu>
並且不要忘記使用setHasOptionsMenu(true)來啟用菜單。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.