自定义导航栏 Android - 四分之一屏幕高度和透明背景

debugcn 发表于 Dev

达斯·普莱格里斯

我想知道如何构建这种类型的用户界面。我的应用程序中有一个底部导航栏，当单击添加按钮时，我想显示如下所示的弧形菜单，同时在屏幕高度的其余部分保持先前膨胀的视图。

图片示例：

我已经使用片段来实现底部导航的默认方式，但我如何调整它看起来像这样。该BottomNavigationView控件不具备的意见部分呈现的支持。是否有支持此操作或自定义方式的库？谢谢。

编辑：这是我当前使用片段事务、片段和默认底部导航小部件的实现：

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

private static final String TAG = MainActivity.class.getSimpleName();

private Toolbar toolbar;
private BottomNavigationView bottomNav;

private Fragment fragment;
private FragmentTransaction transaction;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    init();

}

private void switchFragment(Fragment fragment) {
    transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.fragHolder, fragment);
    transaction.addToBackStack(null);
    transaction.commit();
}

private void init() {
    bottomNav = findViewById(R.id.bottomNav);
    toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    fragment = new HomeFragment();
    switchFragment(fragment);

    bottomNav.setOnNavigationItemSelectedListener(this);

}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.ACTION_DOWN) {
        super.onKeyDown(keyCode, event);
        return true;
    }
    return false;

}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    switch (menuItem.getItemId()){
        case R.id.nav_home:
            fragment = new HomeFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_notifications:
            fragment = new AlertsFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_add:
            //fragment = new AddFragment();
            //switchFragment(fragment);
            //return true;
            This is where I want to load the curved menu/dialog and ideally the previous screen from Activity Stack or Fragment BackStack will be visible on top and this screen only takes up 20-25% of screen height
        case R.id.nav_messages:
            fragment = new MessagesFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_profile:
            fragment = new ProfileFragment();
            switchFragment(fragment);
            return true;
    }
    return false;
}
}

埃兹

这不是一个完整的示例，但希望它可以让您了解您可以做什么。

这使用自定义的BottomSheetDialog，并且使用对话框的好处是它很容易通过后退按钮或在视图外单击来关闭。

测试对话框

public class TestDialog extends BottomSheetDialog
{
    private Context _context;

    public TestDialog(Context context)
    {
        super(context);
        this._context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        Window window = getWindow();
        if (window != null)
            window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        setContentView(R.layout.test_layout);
    }
}

R.layout.test_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/transparent">

    <View
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@drawable/curve"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="14dp"
        android:background="@color/white"
        android:baselineAligned="false">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_person_black_24dp"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="New Session"
                android:textColor="@color/black"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_person_black_24dp"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Enroll Player"
                android:textColor="@color/black"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_person_black_24dp"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="New Batch"
                android:textColor="@color/black"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

@drawable/曲线

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"/>
    </item>
    <item
        android:bottom="-80dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="0dp">
        <shape android:shape="oval">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

显示对话框

TestDialog dialog = new TestDialog(MainActivity.this);
tdialog.show();

//This is done in order to make dialog width match the screen width
Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);

现在做什么

如果您决定走这条路，现在还有两件事要实施。首先是确保对话窗口本身没有背景，现在它不是完全透明的，第二件事是确保它不会覆盖您的BottomNavigationView

示例如何在您的案例中显示对话框

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    switch (menuItem.getItemId()){
        case R.id.nav_home:
            fragment = new HomeFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_notifications:
            fragment = new AlertsFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_add:
            //Show the dialog
            TestDialog dialog = new TestDialog(MainActivity.this);
            tdialog.show();

            //This is done in order to make dialog width match the screen width
            Window window = dialog.getWindow();
            window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        case R.id.nav_messages:
            fragment = new MessagesFragment();
            switchFragment(fragment);
            return true;
        case R.id.nav_profile:
            fragment = new ProfileFragment();
            switchFragment(fragment);
            return true;
    }
    return false;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。