Question

大家好。我想创建一个包含底部导航栏的片段。底部导航有效，但在我的片段布局中似乎出现了错误的位置。另外，此代码在活动方面效果很好，但在片段方面却效果不佳。

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

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);
}

}

Answer 1

您将忽略属性和def样式。使用@JvmOverloads注释扩展视图类

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

// custom class body
}

底部导航未固定到片段视图的底部

1 个答案: