android在同一个活动中添加两个工具栏?

时间:2015-09-27 14:30:50

标签: android menu toolbar

我有一个底部菜单作为工具栏,我需要在顶部添加另一个作为操作栏。这是活动的代码

public class ListViewPharms extends AppCompatActivity {
public Toolbar mToolbar;
ListView mListView;
SimpleAdapter pharmAdapter;
LinearLayout searchsec;
// Search EditText
EditText inputSearch;


@Override
public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_action_bar);

    getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.activity_list_view_pharms_title);



    Toolbar toolbar = (Toolbar) findViewById(R.id.mytoolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    setupEvenlyDistributedToolbar();



    inputSearch = (EditText) findViewById(R.id.search_bar);

    inputSearch.addTextChangedListener(new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence cs, int arg1, int arg2, int arg3) {
            // When user changed the Text
            ListViewPharms.this.pharmAdapter.getFilter().filter(cs);
        }

        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
                                      int arg3) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable arg0) {
            // TODO Auto-generated method stub
        }
    });


}

@Override
public boolean onCreateOptionsMenu(Menu menu) {


    MenuInflater inflater = getMenuInflater();

    inflater.inflate(R.menu.menu_register, menu);

    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_home:
            Intent intent = new Intent(this, ListViewPharms.class);
            startActivity(intent);
            break;
        case R.id.action_cont:
            item.setIcon(getResources().getDrawable(R.drawable.icon2_active));

            Intent intent2 = new Intent(this, Contribute.class);
            startActivity(intent2);
            break;
        case R.id.action_info:
            Intent intent3 = new Intent(this, info.class);
            startActivity(intent3);
            break;
        case R.id.action_settings:
            Intent intent4 = new Intent(this, contactInfo.class);
            startActivity(intent4);
            break;
    }
    return true;
}


/**
 * This method will take however many items you have in your
 * menu/menu_main.xml and distribute them across your devices screen
 * evenly using a Toolbar. Enjoy!!
 */
public void setupEvenlyDistributedToolbar(){
    // Use Display metrics to get Screen Dimensions
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics metrics = new DisplayMetrics();
    display.getMetrics(metrics);

    // Toolbar
    mToolbar = (Toolbar) findViewById(R.id.mytoolbar);
    // Inflate your menu
    mToolbar.inflateMenu(R.menu.menu_register);

    // Add 10 spacing on either side of the toolbar
    mToolbar.setContentInsetsAbsolute(4, 4);

    // Get the ChildCount of your Toolbar, this should only be 1
    int childCount = mToolbar.getChildCount();
    // Get the Screen Width in pixels
    int screenWidth = metrics.widthPixels;

    // Create the Toolbar Params based on the screenWidth
    Toolbar.LayoutParams toolbarParams = new Toolbar.LayoutParams(screenWidth, ViewGroup.LayoutParams.WRAP_CONTENT);

    // Loop through the child Items
    for(int i = 0; i < childCount; i++){
        // Get the item at the current index
        View childView = mToolbar.getChildAt(i);
        // If its a ViewGroup
        if(childView instanceof ViewGroup){
            // Set its layout params
            childView.setLayoutParams(toolbarParams);
            // Get the child count of this view group, and compute the item widths based on this count & screen size
            int innerChildCount = ((ViewGroup) childView).getChildCount();
            int itemWidth  = (screenWidth / innerChildCount);
            // Create layout params for the ActionMenuView
            ActionMenuView.LayoutParams params = new ActionMenuView.LayoutParams(itemWidth, ViewGroup.LayoutParams.WRAP_CONTENT);
            // Loop through the children
            for(int j = 0; j < innerChildCount; j++){
                View grandChild = ((ViewGroup) childView).getChildAt(j);
                if(grandChild instanceof ActionMenuItemView){
                    // set the layout parameters on each View
                    grandChild.setLayoutParams(params);
                }
            }
            }
        }
    }
}

以下是此活动的xml mytoolbar是底部工具栏:

<RelativeLayout
    android:id="@+id/pharms_list"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:layout_above="@+id/mytoolbar">

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"

        android:drawSelectorOnTop="false"
        android:layout_below="@+id/first_sec"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

<android.support.v7.widget.Toolbar
    android:id="@+id/mytoolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/linesup"
    app:contentInsetLeft="10dp"
    app:contentInsetRight="10dp"
    app:contentInsetStart="10dp"
    >
</android.support.v7.widget.Toolbar>

并在清单文件中我添加了android:uiOptions =&#34; splitActionBarWhenNarrow&#34;我该如何将菜单添加到顶部作为此图像?

enter image description here

2 个答案:

答案 0 :(得分:12)

我有类似的需求,唯一的区别是我想要一个顶部的工具栏,以及底部的一种动作栏。

toobar必须符合材料,标题,一些按钮,可能还有动作溢出,而底栏必须包含一些等距,始终可见的按钮,没有别的。

我的实现遵循,测试和工作,在Android 4.x和Android 5.x上。

这是布局;正如你所看到的,我没有使用工具栏作为底栏,而是一个ActionMenuView,它是一个较低级别的小部件,工具栏本身在内部使用:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/page_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"/>

    <android.support.v7.widget.ActionMenuView
        android:id="@+id/bottom_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="?attr/colorPrimary"
        android:elevation="4dp" />

    <WebView
        android:id="@+id/page"
        android:layout_below="@id/page_toolbar"
        android:layout_above="@id/bottom_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

这是底栏的菜单;与常规工具栏菜单相比没什么不同:

<?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">

    <item
        android:id="@+id/action_list"
        android:icon="@drawable/ic_list"
        android:title="@string/action_list"
        app:showAsAction="always"/>

    <!-- several more items here... -->

</menu>

这是我的活动中的代码,它来自AppCompatActivity;正如你所看到的,我利用顶部工具栏的onCreateOptionsMenu回调来膨胀和初始化底栏。不幸的是,需要单独设置底栏菜单项的听众。但是他们可以与顶部工具栏共享相同的onOptionsItemSelected:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the toolbar menu
    getMenuInflater().inflate(R.menu.web_page_menu, menu);

    // Inflate and initialize the bottom menu
    ActionMenuView bottomBar = (ActionMenuView)findViewById(R.id.bottom_toolbar);
    Menu bottomMenu = bottomBar.getMenu();
    getMenuInflater().inflate(R.menu.obj_menu, bottomMenu);
    for (int i = 0; i < bottomMenu.size(); i++) {
        bottomMenu.getItem(i).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                return onOptionsItemSelected(item);
            }
        });
    }

    return true;
}

截图:

enter image description here

我不确定这是一个完全正统的实现,但我希望它对某人有用。

答案 1 :(得分:5)

请参阅以下教程Using the Android Toolbar (ActionBar) - Tutorial

如果你想拥有两个不同的工具栏,你可以使用两个工具栏,只需设置两个不同的工具栏的 layout_gravity ,一个用于顶部,另一个用于< strong> bottom 如下:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <!-- As the main content view, the view below consumes the entire
        space available using match_parent in both dimensions. -->
    <FrameLayout android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/circle_blue"/>


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_margin="8dp"
        android:background="@drawable/curved_div_shadow"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar2"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_margin="8dp"
        android:layout_gravity="bottom"
        android:background="@drawable/curved_div_shadow"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways">

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

</android.support.design.widget.CoordinatorLayout>

另请阅读此Using two toolbars with multiple menus,了解两个工具栏的不同菜单。