EasyClick 原生UI连载七

EasyClick 原生UI连载目录

    • EasyClick 原生UI教程
    • 搭配AndroidStudio开发UI界面
      • 准备环境
      • 搭配AndroidStudio使用方法
        • Androidstudio工具使用
        • AndroidStudio UI设计界面
        • 使用Androidstudio创建布局文件
        • 例子
      • 重要提示

EasyClick 原生UI教程

讲师:Mr-老鬼,QQ:1156346325
EasyClick 原生UI教程电梯直达
EasyClick 原生UI教程总纲

搭配AndroidStudio开发UI界面

编写写UI之前请看前几章连载系列了解EasyClick 官方支持的原生控件

准备环境

  1. Androidstudio AndroidSDK 工具下载安装
  2. EasyClick IDEA JDK 工具包下载安装
    这里不再赘述安装环境配置

搭配AndroidStudio使用方法

Androidstudio工具使用

Androidstudio国内官方连接
如何新建工程这里不再赘述请参考:Android Studio使用教程@Dimo张小天感谢下原作者

AndroidStudio UI设计界面

EasyClick 原生UI连载七_第1张图片
汉化自行百度或者CSDN搜索IDEA的教程这里不再赘述。

使用Androidstudio创建布局文件

先打开工程目录 按照下图标记依次打开找到layout文件夹

EasyClick 原生UI连载七_第2张图片
右键新建依次找到下图所示的layoutXML File 点击
EasyClick 原生UI连载七_第3张图片
点开之后进入这个界面(如下图所示)
修改1位置 自己命名布局文件名不允许中文命名,点击2位置完成新建
EasyClick 原生UI连载七_第4张图片
创建完成后进入布局文件编辑界面(如下图所示)
图中1位置为xmlUI布局编辑 2位置为关闭文档编辑 3位置为UI分裂 4位置为打开拖拽布局编辑 5位置为UI效果展示 6位置为UI拖拽编辑框
EasyClick 原生UI连载七_第5张图片
拖拽控件创建布局界面如下图
1位置为布局控件区 2位置为拖拽编辑区 3位置为效果展示区
EasyClick 原生UI连载七_第6张图片

例子


<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
		    android:layout_width="match_parent"
		    android:layout_height="match_parent">

    <LinearLayout
			        android:layout_width="match_parent"
			        android:layout_height="match_parent"
			        android:orientation="vertical">

        <LinearLayout
			            android:layout_width="wrap_content"
			            android:layout_height="wrap_content"
			            android:orientation="horizontal">

            <TextView
		                android:layout_width="wrap_content"
		                android:layout_height="wrap_content"
		                android:text="这是个文本"
		                android:textColor="#FFAACC"
		                android:textSize="19sp" />

            <Button
		                android:layout_width="wrap_content"
		                android:layout_height="wrap_content"
		                android:text="这是个按钮"
		                android:textColor="#bbccdd"
		                android:textSize="19sp" />

            <Switch
		                android:layout_width="wrap_content"
		                android:layout_height="wrap_content"
		                android:checked="true"
		                android:text="这是个开关" />

        LinearLayout>

        <LinearLayout
			            android:layout_width="match_parent"
			            android:layout_height="match_parent"
			            android:orientation="horizontal">

            <LinearLayout
			                android:layout_width="wrap_content"
			                android:layout_height="wrap_content"
			                android:orientation="horizontal">

                <TextView
		                    android:layout_width="wrap_content"
		                    android:layout_height="wrap_content"
		                    android:text="旁边的是个编辑框 "
		                    android:textColor="#FFAACC"
		                    android:textSize="19sp" />

            LinearLayout>

            <EditText
		                android:layout_width="wrap_content"
		                android:layout_height="wrap_content"
		                android:textColorHint="#DD0000"
		                android:background="#ccddbb"
		                android:hint="这是提示输入内容" />
        LinearLayout>

    LinearLayout>

ScrollView>

效果如下图所示
EasyClick 原生UI连载七_第7张图片

重要提示

Androidstudio里面的android:id="@+id/textview" 在EasyClick 里面是android:tag=“textview” 需要手动替换掉 id 为 tag 否则无法调用操作控件。

我是Mr-老鬼、QQ1156346325 。交流QQ群:620028786,647082990
---------------------------------------版权声明------------------------------------------------------
版权所有~Mr-老鬼 ~转载请注明原文地址。
免责声明:本文所有的教程仅限交流学习使用不得用于违法用途,造成的法律后果本人不承担责任。

你可能感兴趣的:(Easy,Click,原生,UI,系列,安卓)