1. 技术文章
  2. 几种开发UI界面的方式demo Android

几种开发UI界面的方式demo Android

由 放肆的年华 提交于 2019-12-05 02:35:48

下面用demo说明： 

1.######## 用编程的方式开发UI界面 2014年5月13日 上午6:07 ##################

/* 用编程的方式开发UI界面 */

// 创建一个线性布局管理器

LinearLayout layout = new LinearLayout(this);

// 设置Activity显示layout

super.setContentView(layout);

// 设置layout中的控件垂直排列

layout.setOrientation(LinearLayout.VERTICAL);

// 创建一个TextView

final TextView tvShow = new TextView(this);

// 创建一个按钮

Button btn = new Button(this);

btn.setText(R.string.ok);

btn.setLayoutParams(new ViewGroup.LayoutParams(

ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT));

// 向layout中添加TextView

layout.addView(tvShow);

// 向layout中添加按钮

layout.addView(btn);

// 为按钮绑定一个监听事件

btn.setOnClickListener(new OnClickListener()

{

@Override

public void onClick(View v)

{

tvShow.setText("Hello , Android ," + new java.util.Date());

}

});

################### 用编程的方式开发UI界面 end ##################

2.### 使用xml布局文件和java代码混合控制UI界面 2014年5月13日 上午6:29 ###

/** 定义一个访问图片的数组 */

int[] images = new int[]

{ R.drawable.reader_king_logo, R.drawable.ic_launcher,

R.drawable.reader_king_logo, R.drawable.ic_launcher,

R.drawable.reader_king_logo };

/** 当前的imge下标 */

private int currentImg = 0;

。。。。。。。。。。

setContentView(R.layout.activity_main);

//获取LinearLayout布局容器

LinearLayout linearLayout = (LinearLayout)

findViewById(R.id.activity_main_ll_root);

//程序创建ImageView组件

final ImageView image = new ImageView(this);

//将ImageView组件添加到LinearLayout布局容器中

linearLayout.addView(image);

//初始化时显示第一张图片

image.setImageResource(images[0]);

//设置ImageView的点击事件

image.setOnClickListener(new OnClickListener()

{

@Override

public void onClick(View v)

{

if(currentImg >= 4){

currentImg = -1;

}

//改变ImageView中显示的图片

image.setImageResource(images[++currentImg]);

}

});

### 使用xml布局文件和java代码混合控制UI界面 2014年5月13日 上午6:29 end ###

3.自定义view

在MainActivity.java中写如下代码：

Intent intent = new Intent();

intent.setClass(this, CustomViewActivity.class);

startActivity(intent);

下面是CustomViewActiviy.java的具体代码：

package com.example.lganroid;


import android.app.Activity;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.widget.LinearLayout;


/**

 * 实现跟随手指的小球

 * 

 * @作者： 刘倩</br>

 * @时间： 2014年5月13日 上午7:05:53</br>

 * @描述： 自定义View的具体实现</br>

 */

public class CustomViewActivity extends Activity

{


@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

// 加载布局xml文件

setContentView(R.layout.activity_main);

// 获取布局文件的LinearLayout容器

LinearLayout linearLayout = (LinearLayout) findViewById(R.id.activity_main_ll_root);

// 创建DrawView组件

final DrawView drawView = new DrawView(this);

// 设置自定义组件的最小宽度和高度

drawView.setMinimumWidth(300);

drawView.setMinimumHeight(500);

// 为drawView组件绑定Touch事件

drawView.setOnTouchListener(new OnTouchListener()

{


@Override

public boolean onTouch(View v, MotionEvent event)

{

// 修改drawView的currentX和currentY两个属性

drawView.currentX = event.getX();

drawView.currentY = event.getY();

// 通知draw组件重绘

drawView.invalidate();

// 返回true表名处理方法已经处理改事件

return true;

}

});

// 将drawView组件添加到Linearlayout中

linearLayout.addView(drawView);

}

}

运行之后就可以看到随手指移动的自定义的小红球。

4.自定义控件属性（其一）

package com.example.lganroid;


import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.Paint.Style;

import android.util.AttributeSet;

import android.view.View;


/**

 * 自定义控件的属性

 * 

 * @作者： 刘倩</br>

 * @时间： 2014年5月13日 上午7:16:49</br>

 * @描述： 自定义控件的属性，主要包括颜色和大小</br>

 */

public class CustomView extends View

{


/** 声明画笔 */

private Paint mPaint;

/** 要显示的字符串 */

private String mText = "hello";


/**

* 有参构造函数

* 

* @param context

*            上下文

* @param attrs

*            属性

*/

public CustomView(Context context, AttributeSet attrs)

{

super(context, attrs);

// 初始化画笔

mPaint = new Paint();

// TypedArray是存放资源的数组，通过上下文得到这个数组，attrs是构造函数传进来的，对应attrs.xml

TypedArray typedArray = context.obtainStyledAttributes(attrs,

R.styleable.CustomView);

// 获得xml里定义的属性，格式为 名称_属性名 后面是默认值

int textColor = typedArray.getColor(R.styleable.CustomView_textColor,

0xFFFFFFFF);

float textSize = typedArray.getDimension(

R.styleable.CustomView_textSize, 35);

mPaint.setColor(textColor);

mPaint.setTextSize(textSize);

// 为了保持以后使用该属性一致性，返回一个绑定资源结束的信号给资源

typedArray.recycle();

}


@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

mPaint.setStyle(Style.FILL);

canvas.drawText(mText, 10, 60, mPaint);

}


}

在main.xml中的引用如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:test="http://schemas.android.com/apk/res/com.example.lganroid"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >


    <com.example.lganroid.CustomView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        test:textColor="#f00"

        test:textSize="20sp" />

 </LinearLayout>

在attrs.xml中配置如下：

<?xml version="1.0" encoding="utf-8"?>

<resources>


    <declare-styleable name="CustomView">

        <attr name="textColor" format="color" />

        <attr name="textSize" format="dimension" />

    </declare-styleable>

</resources>


5.自定义控件属性（其二）

package com.example.lganroid;


import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.util.AttributeSet;

import android.widget.Button;

import android.widget.LinearLayout;


/**

 * 自定义线性布局

 * 

 * @作者： 刘倩</br>

 * @时间： 2014年5月13日 下午7:28:33</br>

 * @描述： 自定义线性布局，在其中添加一个按钮，并设置按钮的文字，大小和颜色</br>

 */

public class CustomView2 extends LinearLayout

{

/** 按钮显示的文字 */

private String BtnText;


public CustomView2(Context context)

{

super(context);

}


public CustomView2(Context context, AttributeSet attrs)

{

super(context, attrs);

//声明按钮的id

int resourceId = -1;

//声明按钮

Button btn = new Button(context);

//从布局文件获得按钮的id

resourceId = attrs.getAttributeResourceValue(null, "BtnText", 0);

if(resourceId >0 ){

BtnText = context.getResources().getText(resourceId).toString();

}else{

BtnText = "";

}

btn.setText(BtnText);

//设置按钮文字的颜色为红色

btn.setTextColor(Color.RED);

//设置按钮中的字体大小为18像素

btn.setTextSize(18);

//将按钮加载到线性布局中

addView(btn);

//设置布局的排列方式为垂直排列

this.setGravity(LinearLayout.VERTICAL);

}


@SuppressLint("NewApi")

public CustomView2(Context context, AttributeSet attrs, int defStyle)

{

super(context, attrs, defStyle);

}


@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

}


}

在main.xml中的配置：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:test="http://schemas.android.com/apk/res/com.example.lganroid"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <com.example.lganroid.CustomView2

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        BtnText="@string/app_name"

         />


</LinearLayout>






标签
UI
android
页面
编程
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!