创建科学计算器的按钮

时间：2015-04-02 13:48:11

标签： android android-layout calculator android-gridlayout

.. consider this image of my calc

如图所示，我必须创建具有两个功能的按钮。例如，在底部第一行中，“0”具有另一个称为“Rnd”和“。”的函数。有“Ran＃RanInt”功能。

我把它作为一个项目而且我被卡住了 - 我无法获得按钮，按钮上方的名称如图所示正确对齐。

此外，我不确定这是正确的方法，我使用了代码中显示的GridLayout，我在LinearLayout内使用了GridLayout按钮，它们似乎适合 - 但我无法将文本放在按钮上方，如图所示。

可以从here下载字体文件...下载 casio fx-es plus系列。我已在程序中将文件ES-03重命名为casiofont.ttf。

屏幕截图enter image description here 

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="10dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="space to show enabled functions"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignEnd="@+id/webView2" />

    <WebView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/webView2"

        android:layout_below="@+id/textView"
        android:layout_alignParentStart="true"></WebView>

        <GridLayout
        android:id="@+id/gridlayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentStart="true"
        android:rowCount="9"
        android:columnCount="6"
        android:layout_below="@+id/webView2">

            <LinearLayout
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_row="0"
                android:layout_column="0"
                android:weightSum="5"
                android:id="@+id/linearLayout"
                android:layout_below="@+id/webView2"
                android:layout_alignParentStart="true"
                android:layout_alignEnd="@+id/gridlayout">

                <TextView
                    android:id="@+id/rnd"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="@string/rnd"
                    android:layout_weight="1"
                    android:layout_column="0"
                    android:layout_columnSpan="1"
                    android:layout_row="0" />

                <TextView
                    android:id="@+id/ran_ranint"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:text="@string/ran_ranint"
                    android:layout_column="1"
                    android:layout_columnSpan="1"
                    android:layout_row="0" />

                <com.example.girikarnal.engineringcalc.CalculatorButtonTextView
                    android:id="@+id/pi_e1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/pi_e"
                    android:layout_column="2"
                    android:layout_row="0" />
                <TextView
                    android:id="@+id/pi_e2"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="@string/e"
                    android:layout_weight="0.78"
                    android:layout_column="2"
                    android:layout_width="wrap_content"
                    android:layout_row="0" />
                <com.example.girikarnal.engineringcalc.CalculatorButtonTextView
                    android:layout_width="41dp"
                    android:layout_height="wrap_content"
                    android:id="@+id/drg_ans"
                    android:text="@string/dgr_ans"
                    android:gravity="center"
                    android:layout_weight="0.80" />
            </LinearLayout>


            <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/linearlayout1"
            android:layout_row="1"
            android:layout_column="0">


        <com.example.girikarnal.engineringcalc.CalculatorButtonButton
            android:id="@+id/zero"
            android:text="@string/zero_Rnd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:layout_column="1"
            android:layout_row="1" />

        <com.example.girikarnal.engineringcalc.CalculatorButtonButton
            android:id="@+id/dot"
            android:text="@string/dot_or_ran"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:layout_column="2"
            android:layout_row="1" />

        <com.example.girikarnal.engineringcalc.CalculatorButtonButton
            android:id="@+id/multiple_of_ten"
            android:text="@string/multiple_of_ten_or_pi_e"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:layout_column="3"
            android:layout_row="1" />

        <com.example.girikarnal.engineringcalc.CalculatorButtonButton
            android:id="@+id/ans"
            android:text="@string/ans_or_DRG"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:layout_column="4"
            android:layout_row="1" />

        <com.example.girikarnal.engineringcalc.CalculatorButtonButton
            android:id="@+id/equals"
            android:text="@string/equals"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:layout_column="5"
            android:layout_row="1" />
        </LinearLayout>


    </GridLayout>


</RelativeLayout>

CalculatorButton 

public class CalculatorButtonButton extends Button {
    public CalculatorButtonButton(Context context) {
        super(context);
        init();
    }

    public CalculatorButtonButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }
    private void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
                "fonts/casiofont.ttf");
//        String s="tf";
//        SpannableString spanString = new SpannableString(s);
//        spanString.setSpan(new StyleSpan(Typeface.BOLD), 0, spanString.length(), 0);
        setTypeface(tf);
    }
}

CalculatorTextView 

public class CalculatorButtonTextView extends TextView {

    // Constructors
    public CalculatorButtonTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    public CalculatorButtonTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public CalculatorButtonTextView(Context context) {
        super(context);
        init();
    }

    // This class requires casiofont.ttf to be in the assets/fonts folder
    private void init() {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
                "fonts/casiofont.ttf");
        setTypeface(tf);
    }

}

2 个答案:

答案 0 :(得分：2)

只需创建自定义视图 像这样的东西

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:gravity="center"
        android:text="text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:text="btn"
        android:layout_width="match_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

CalcBtn类

public class CalcBtn extends LinearLayout {
    public CalcBtn(Context context) {
        super(context);
        init(context);
    }

    public CalcBtn(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public CalcBtn(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        View.inflate(context, R.layout.calc_btn, this);
    }
}

然后在你的布局中使用它

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <com.example.example.CalcBtn
        android:layout_width="100dp"
        android:layout_height="wrap_content" />
    <com.example.example.CalcBtn
        android:layout_width="60dp"
        android:layout_height="wrap_content" />
    <com.example.example.CalcBtn
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <com.example.example.CalcBtn
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Result

答案 1 :(得分：2)

嗯，目前尚不清楚你想要如何布置按钮，但首先你在使用GridLayout时遇到了一些问题：

  • 行数和列数似乎不对（你有2行5列吗？）
  • LinearLayout内不需要GridLayout; GridLayout的每个子项都将在网格中分配一个单元格，因此您可以直接在网格布局下放置文本和按钮视图（参见下面的示例）

此外：

  • 给定布局的其余部分
    • ，GridLayout高度最有可能是wrap_content
  • 无需指定列范围为1，这是默认值（实际上甚至不是 span ...）
  • 无需指定子布局宽度和高度（GridLayout中未考虑它们）
  • 没有需要指定子列和行索引，它们将按照声明的顺序添加到网格中
  • 无需指定行号，可以从列号和子数中推断

所以，你可以用这样的东西声明你的网格：

<GridLayout
    android:id="@+id/gridlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:columnCount="5">

    <TextView
        android:id="@+id/textView1"
        android:textStyle="bold"
        android:gravity="center"
        android:text="@string/text1"/>
    <TextView
        android:id="@+id/textView2"
        android:textStyle="bold"
        android:gravity="center"
        android:text="@string/text2"/>
    <!-- ... etc add you remaining 3 labels here -->

    <Button
        android:id="@+id/button1"
        android:text="@string/textButton1"/>
    <Button
        android:id="@+id/button2"
        android:text="@string/textButton2"/>
    <!-- ... etc add you remaining 3 buttons here -->

</GridLayout>

但如果我理解你想要创建大小相同的列和行（并且可能拉伸或收缩它们？），GridLayout（根据我的经验）可能非常棘手适应这些用例（如果你想走这条路，尝试使用Space而不是摆弄行/列和元素属性）。 TableLayout虽然效果更好。你可以写下这样的东西：

<TableLayout
    android:id="@+id/table_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*"
    android:shrinkColumns="*">

    <TableRow>
        <TextView
            android:id="@+id/textView1"
            android:textStyle="bold"
            android:gravity="center"
            android:text="@string/text1"/>
        <TextView
            android:id="@+id/textView2"
            android:textStyle="bold"
            android:gravity="center"
            android:text="@string/text2"/>
        <!-- ... etc add you remaining 3 labels here -->
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/button1"
            android:text="@string/textButton1"/>
        <Button
            android:id="@+id/button2"
            android:text="@string/textButton2"/>
        <!-- ... etc add you remaining 3 buttons here -->
    </TableRow>

</TableLayout>

或者，如果您希望列的大小相同，并占用TableLayout可用的所有宽度，请使用权重：

<TableLayout
    android:id="@+id/table_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableRow>
        <TextView
            android:id="@+id/textView1"
            android:textStyle="bold"
            android:gravity="center"
            android:text="@string/text1"
            android:layout_width="0dp"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/textView2"
            android:textStyle="bold"
            android:gravity="center"
            android:text="@string/text2"
            android:layout_width="0dp"
            android:layout_weight="1"/>
        <!-- ... etc add you remaining 3 labels here -->
    </TableRow>

    <TableRow>
        <Button
            android:id="@+id/button1"
            android:text="@string/textButton1"
            android:layout_width="0dp"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/button2"
            android:text="@string/textButton2"
            android:layout_width="0dp"
            android:layout_weight="1"/>
        <!-- ... etc add you remaining 3 buttons here -->
    </TableRow>

</TableLayout>

你也可以使用嵌套的LinearLayout s（水平的，有5个嵌套的垂直的，反之亦然），这基本上是TableLayout做的TableLayout和{{1} } 是 TableRow s）。

顺便说一句这些例子是＆＃34; plain＆＃34;文本视图和按钮，但您当然可以使用卡西欧字体启用的自定义视图，但它不会产生任何影响。

因此虽然LinearLayout可用，并且应该比GridLayout消耗更少的系统资源，但后者可能更容易配置以匹配您所需的布局。

有关详细信息，建议您查看GridLayout guide和TableLayout one。

相关问题
最新问题