前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >UI的基本控件设计

UI的基本控件设计

作者头像
Dream城堡
发布2018-12-13 17:11:51
8380
发布2018-12-13 17:11:51
举报
文章被收录于专栏:Spring相关Spring相关

新建一个UIwidgetTest项目,结构图如下:

image.png

相关的控件如下:

在activity_main.xml中添加控件的样式,在MainActivity中可以添加点击事件

1.文本
代码语言:javascript
复制
<!--文本-->
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"
        android:textColor="#00ff00"
        android:text="this is TextView"
        />
2.按钮
代码语言:javascript
复制
<!--按钮-->
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button"
        android:textAllCaps="false"
        />

按钮点击事件需要在MainActivity中进行修改,如下:

代码语言:javascript
复制
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private static final String TAG = "MainActivity";

    private EditText editText;

    //图片编辑
    private ImageView imageView;

    //进度条
    private ProgressBar progressBar;

    //按钮
    private Button button;

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

        editText = (EditText) findViewById(R.id.edit_text);

        imageView = (ImageView) findViewById(R.id.image_view);

        progressBar = (ProgressBar) findViewById(R.id.progress_bar);

        //添加按钮点击事件
        button = (Button) this.findViewById(R.id.button);
        button.setOnClickListener(this);

//        button.setOnClickListener(new View.OnClickListener() {

        //修改图片和文本弹出框
//            @Override
//            public void onClick(View v) {
//                String inputText = editText.getText().toString();
//                Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_LONG).show();
//
//                imageView.setImageResource(R.drawable.image2);
//                Log.d(TAG, "onClick:点击了按钮 ");
//            }

        //隐藏进度条
//            public void onClick(View v) {
//                String inputText = editText.getText().toString();
//                Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_LONG).show();
//
//                imageView.setImageResource(R.drawable.image2);
//                Log.d(TAG, "onClick:点击了按钮 ");
//            }
//        });
    }

    //隐藏进度条
    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.button:

                //此处添加点击触发的事件
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }

                break;
            default:
                break;
        }
    }
}
3.文字输入器
代码语言:javascript
复制
<!--文字输入器-->
    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="type code"
        android:maxLength="5"
        />
4.图片
代码语言:javascript
复制
<!--图片-->
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image1"
        />
5.进度条
代码语言:javascript
复制
<!--进度条-->
    <!--style="?android:attr/progressBarStyleHorizontal"可以把进度条变为水平显示-->
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"

        />

设置进度条点击一次加10:(最多加10次 到100)

代码语言:javascript
复制
@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                //进度条的加载
                int progress = progressBar.getProgress();
                progress+=10;
                progressBar.setProgress(progress);
                break;
            default:
                break;
        }
    }
6.页面对话框AlertDialog

这个对话框在交互的最顶层,一般用于显示比较重要的信息,如是否确认删除等

代码语言:javascript
复制
@Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.button:
                /**
                 * 界面弹出对话框
                 */

                AlertDialog.Builder dialog = new AlertDialog.Builder(
                        MainActivity.this
                );

                dialog.setTitle("这是一个弹出框");
                dialog.setMessage("重要的内容哦");
                dialog.setCancelable(false);


                dialog.setPositiveButton("好的", new DialogInterface.OnClickListener()                {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                    }
                });

                dialog.setNegativeButton("取消", new DialogInterface.OnClickListener()                {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                dialog.show();
                break;
            default:
                break;
        }
    }
7.进度条对话框ProgressDialog
代码语言:javascript
复制
@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                /**
                 * 进度条对话框
                 */
                ProgressDialog progressDialog = new  ProgressDialog(MainActivity.this);
                progressDialog.setTitle("进度条框");
                progressDialog.setMessage("加载中.......");
                progressDialog.setCancelable(true);
                progressDialog.show();
                break;
            default:
                break;
        }
    }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 相关的控件如下:
    • 1.文本
      • 2.按钮
        • 3.文字输入器
          • 4.图片
            • 5.进度条
              • 6.页面对话框AlertDialog
                • 7.进度条对话框ProgressDialog
                相关产品与服务
                图片处理
                图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档