Question

我希望得到一个效果，就像图片上显示的那样（从一些使用它的应用程序中提取）：一个包含自定义布局的AppBar。

如何实现这一目标？可以通过AppBar的自定义来完成吗？或者我应该使用模拟作为AppBar的规范布局？

谢谢！

Answer 1

    <?xml version="1.0" encoding="utf-8"?>
<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="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_collapseMode="pin">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- This is a centered logo -->
        <ImageView
            android:id="@+id/toolbar_logo"
            android:src="@drawable/logo"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginRight="?attr/actionBarSize"
            android:layout_marginTop="4dp"
            android:layout_marginBottom="4dp"
            android:layout_gravity="center" />

        <!-- This is a centered title -->
        <!--
        <TextView
            android:id="@+id/toolbar_title"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginRight="?attr/actionBarSize"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:visibility="gone"
            android:text="@string/app_name"
            android:textColor="@color/white"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            />
            -->

        <!-- This is a custom left side button -->
        <!--
        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:layout_marginRight="?attr/actionBarSize"
            android:layout_gravity="start|center_vertical"
            android:visibility="invisible"
            android:src="@drawable/ic_settings_white_24dp"
            style="@style/Widget.AppCompat.ActionButton" />
            -->

        <!-- This is a custom right side button -->
        <!--
        <ImageButton
            android:id="@+id/btn_search"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="end"
            android:src="@drawable/ic_magnify_white_24dp"
            style="@style/Widget.AppCompat.ActionButton" />
            -->

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

自定义工具栏并在主布局中调用此布局。可以使用其中的任何布局

Answer 2

您可以使用您想要的任何布局通常您随处可见，下面的结构示例可以是一个很好的指南：

<input #search/>
<div *ngIf="items$ | async as items">
   <div *ngFor="let item of items">{{item.name}}</div>
</div>

items:any[];
items$:Observable<any>;
@ViewChild('search') search:Elementref;
ngOnInit() {
   const searchProp = 'name';
   this.items$ = Observable.fromEvent(this.search.nativeElement, 'keyup').pipe(
      startWith(''),
      debounceTime(500), // let user type for half a sec
      distinctUntilChanged(), // don't run unless changed
      map(evt => this.items.filter(
         item => !evt.target.value || 
         item[searchProp].toLowerCase().indexOf(evt.target.value) >-1 
         )
      )
}

注意：我在代码中插入了FrameLayout，字面上可以是任何东西，相对映射，线性映射等......

如何使用自定义的AppBar

2 个答案: