【问题标题】:Bottom Navigation is not pinning to bottom inside fragment view底部导航未固定到片段视图内的底部
【发布时间】:2020-11-09 16:03:11
【问题描述】:

大家好。我想创建一个包含底部导航栏的片段。底部导航正在工作,但在我的片段布局中似乎位置错误。此外,此代码在活动中运行良好,但在片段中运行良好。

这是我想要显示底部导航栏的片段。

class ParametreIslemlerFragment:Fragment() {

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    super.onCreateView(inflater, container, savedInstanceState);
    val mContext: Context = activity!!.applicationContext;
    val view:View = inflater.inflate(R.layout.fragment_parametre_islemler,container,false);
    val navBottomMenu:CurvedBottomNavigationView = view.findViewById(R.id.parametreBottomNavigation);
    initNavBottomPreferences(navBottomMenu);

    //fragmentManager?.beginTransaction()?.replace(R.id.parametreFragmentTutucu,FragmentBirinci())?.commit();

    navBottomMenu.setOnNavigationItemSelectedListener { menuItem ->

        true;
    }

    return view;
}

private fun initNavBottomPreferences(navBottomMenu:CurvedBottomNavigationView){
    navBottomMenu.inflateMenu(R.menu.parametre_menu_nav_items);
    navBottomMenu.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_LABELED;
    navBottomMenu.menu.getItem(1).isVisible = false;
}

}

此片段使用上述布局;

 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:id="@+id/parametreFragmentTutucu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="30dp"
    app:layout_constraintBottom_toTopOf="@+id/parametreBottomNavigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</FrameLayout>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/floatingActionButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    app:layout_constraintEnd_toEndOf="parent"
    android:backgroundTint="@color/colorAccent"
    android:layout_marginTop="1dp"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/parametreFragmentTutucu"
    app:srcCompat="@drawable/ic_add_24dp" />

<com.mesutemre.kutuphanesistemi.customcomponents.CurvedBottomNavigationView
    android:id="@+id/parametreBottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

</com.mesutemre.kutuphanesistemi.customcomponents.CurvedBottomNavigationView>

</androidx.constraintlayout.widget.ConstraintLayout>

CurvedBottomNavigation 是一个自定义视图并扩展了 BottomNavigationView。当我运行这些代码时;

代码在活动中工作,为什么片段中的活动布局看起来不像?

CurvedBottomNavigationView的源码是;

  class CurvedBottomNavigationView(context: Context, attrs: 
   AttributeSet) 
 :BottomNavigationView(context, attrs) {

private lateinit var mPath: Path;
private lateinit var mPaint: Paint;

private val CURVE_CIRCLE_RADIUS = 110 / 2;

private var mFirstCurveStartPoint: Point = Point();
private var mFirstCurveEndPoint: Point = Point();
private var mFirstCurveControlPoint1: Point = Point();
private var mFirstCurveControlPoint2: Point = Point();

private var mSecondCurveStartPoint: Point = Point();
private var mSecondCurveEndPoint: Point = Point();
private var mSecondCurveControlPoint1: Point = Point();
private var mSecondCurveControlPoint2: Point = Point();

private var mNavigationBarWidth: Int = 0;
private var mNavigationBarHeight: Int = 0;

init {
    this.init();
}

private fun init(): Unit {
    mPath = Path();
    mPaint = Paint();
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    val colors = IntArray(3);
    colors[0] = ContextCompat.getColor(
        context,
        R.color.bottom_start_color
    );
    colors[1] = ContextCompat.getColor(
        context,
        R.color.bottom_center_color
    );
    colors[2] = ContextCompat.getColor(
        context,
        R.color.bottom_end_color
    );

    val positions = FloatArray(3); //floatArrayOf(0f, 0.3f, 0.6f);
    positions[0] = 0f;
    positions[1] = 0.2f;
    positions[2] = 0.4f;
    mPaint.setShader(
        LinearGradient(
            0f, 0f, measuredWidth.toFloat(), 0f,
            colors,
            positions,
            Shader.TileMode.CLAMP
        )
    );

    mPaint.setShader(
        LinearGradient(
            0f, 0f, 0f, 250f,
            colors, positions,
            Shader.TileMode.MIRROR
        )
    );
    //mPaint.setColor(ContextCompat.getColor(getContext(), R.color.primaryTextColor));
    setBackgroundColor(Color.TRANSPARENT);
    //background = resources.getDrawable(R.drawable.nav_bottom_background);
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh);

    mNavigationBarWidth = getWidth();
    mNavigationBarHeight = getHeight();

    mFirstCurveStartPoint.set(
        (mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3),
        0
    );
    mFirstCurveEndPoint.set(
        mNavigationBarWidth / 2,
        CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)
    );
    // same thing for the second curve
    mSecondCurveStartPoint = mFirstCurveEndPoint;
    mSecondCurveEndPoint.set(
        (mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3),
        0
    );

    mFirstCurveControlPoint1.set(
        mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4),
        mFirstCurveStartPoint.y
    );
    // the coordinates (x,y)  of the 2nd control point on a cubic curve
    mFirstCurveControlPoint2.set(
        mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS,
        mFirstCurveEndPoint.y
    );

    mSecondCurveControlPoint1.set(
        mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS,
        mSecondCurveStartPoint.y
    );
    mSecondCurveControlPoint2.set(
        mSecondCurveEndPoint.x - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)),
        mSecondCurveEndPoint.y
    );

    mPath.reset();
    mPath.moveTo(0F, 0F);
    mPath.lineTo(mFirstCurveStartPoint.x.toFloat(), mFirstCurveStartPoint.y.toFloat());

    mPath.cubicTo(
        mFirstCurveControlPoint1.x.toFloat(), mFirstCurveControlPoint1.y.toFloat(),
        mFirstCurveControlPoint2.x.toFloat(), mFirstCurveControlPoint2.y.toFloat(),
        mFirstCurveEndPoint.x.toFloat(), mFirstCurveEndPoint.y.toFloat()
    );
    mPath.cubicTo(
        mSecondCurveControlPoint1.x.toFloat(), mSecondCurveControlPoint1.y.toFloat(),
        mSecondCurveControlPoint2.x.toFloat(), mSecondCurveControlPoint2.y.toFloat(),
        mSecondCurveEndPoint.x.toFloat(), mSecondCurveEndPoint.y.toFloat()
    );

    mPath.lineTo(mNavigationBarWidth.toFloat(), 0F);
    mPath.lineTo(mNavigationBarWidth.toFloat(), mNavigationBarHeight.toFloat());
    mPath.lineTo(0F, mNavigationBarHeight.toFloat());
    mPath.close();
}

override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
}


@SuppressLint("ResourceAsColor")
override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas);
    canvas?.drawPath(mPath, mPaint);
}

}

【问题讨论】:

  • 能否提供自定义导航视图的源码-CurvedBottomNavigationView
  • @RustamSamandarov 我编辑了帖子。
  • 您使用了错误的构造函数。为什么不通过@JvmOverloads 扩展?
  • 您好,请检查您的 Main Drawer 活动 .xml 文件中的 FrameLayout 是否具有匹配父项的高度和宽度,例如。
  • 嗨@piyushpk。我检查了它。主框架布局的高度和宽度都是 match_parent。

标签: android kotlin android-fragments android-bottomnav


【解决方案1】:

您忽略了属性和定义样式。使用@JvmOverloads 注解扩展视图类

class CurvedBottomNavigationView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : BottomNavigationView(context, attrs, defStyleAttr) {

// custom class body
}

【讨论】:

    猜你喜欢
    • 2021-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-03
    相关资源
    最近更新 更多