2023年7月13日发(作者：)

androidjava写ui_纯Java代码实现AndroidUI这是⼀篇很初级也很简单的教程。为什么要⽤纯 Java 代码来实现 Android UI 界⾯众所周知在 Android 开发时应⽤的 UI 界⾯⼀般是通过 XML ⽂件构建的。⽬前主流的 Android Studio 和Eclipse都可以通过⿏标拖拽控件的⽅式很⾼效的来搭建 UI 界⾯。那么为什么还要使⽤纯 Java 代码的⽅式来实现 UI 界⾯呢？其实还是有⼀些特殊的场合需要使⽤这种纯 Java 代码的⽅式来实现 UI 界⾯的。例如 SDK 的开发。SDK ⼀般都是交付给第三⽅来使⽤的，要求接⼊流程尽可能简单，⼯作量尽可能少，最好直接⼀个 jar 包丢给对⽅，像这种情况纯 Java 代码来实现 UI 界⾯的⽅式就显得尤为重要了。废话就到这，下⾯通过我⼯作中遇到的⼀个例⼦来展⽰⼀下如何⽤纯 Java 代码来实现 Android 的 UI 界⾯。Android UI 界⾯需求如上图所⽰，我们需要使⽤纯 Java 代码来实现这样⼀个 UI 界⾯，它的要求是：背景⿊⾊半透明居中⼀个占整个屏幕 76% 的 ImageView ⽤于显⽰图⽚居中的 ImageView 要有⼀个⽩⾊的带圆⾓的边框居中的 ImageView 右上⾓还要有⼀个圆形的关闭按钮整个界⾯要求只能使⽤纯 Java 代码实现除了 ImageView 中显⽰的图⽚以外，不能使⽤其他图⽚素材我们⼀步⼀步按照要求⽤纯 Java 代码来实现这个 UI 界⾯。dp 与 px 的转换⾄于 dip 、 dp 、 px 、 sp 这些概念就不在这⾥介绍了，⼤家⾃⾏搜索。这⾥要注意的是，在使⽤ XML 做 UI 界⾯布局时⼀般会使⽤ dp做单位，但是在纯 Java 实现中⽅法参数都使⽤ px 做单位，所以这⾥就牵扯到 dp 和 px 之间的转换。直接放出代码：private int dp2px(float dp) {final float scale = getResources().getDisplayMetrics().density;return (int) (dp * scale + 0.5f);}整体布局这⾥就不具体介绍 Android 布局的相关知识了，直接说怎么做。这⾥⽤了线性布局 LinearLayout ，具体布局⽅式是先部署⼀个根布局 LinearLayout在根布局中从上到下嵌套三个 横向 LinearLayout ，其中头部和底部的 layout_weight=12 中间的 layout_weight=76在上⼀步嵌套的中间的 layout_weight=76 的布局中从左到右再嵌套三个 纵向 LinearLayout ，其中最左和最右的 layout_weight=12 中间的 layout_weight=76这样我们就得到⼀块⼉占屏幕 76% 居中放置的区域。对应的我们先展⽰出布局的 XML 形式：再⽤图⽚来⽰意⼀下：然后我们按照这个整体布局将它翻译成纯 Java 代码的样式/* 根布局 *//* this 为当前的 Activity 实例 */LinearLayout rootLayout = new LinearLayout(this);LayoutParamsrootLayoutParams = new占 12% ⾼度的顶部 */LinearLayout topLayout = newLinearLayout(this);entation(NTAL);ParamsvMarginLayoutParams = new占 76% ⾼度的中间 */LinearLayout middleLayout = newLinearLayout(this);entation(NTAL);outParams(Params(_PARENT,0,76.0f));w(middleLayout);/* 占 12% 宽度的左边 */LinearLayout leftLayout = newLinearLayout(this);entation(AL);Params hMarginLayoutParams =new占 76% 宽度的中间 */LinearLayout contentLayout = newLinearLayout(this);entation(AL);outParams(Params(0,_PARENT,76.0f));w(contentLayout);/* 占 12% 宽度的右边 */LinearLayout rightLayout = new占 12% ⾼度的底部 */LinearLayout buttomLayout = newrootLayoutParams);LayoutParams(_PARENT,_PARENT);entation(Params(_PARENT,0,12.0f);outParams(vMarginLayoutParams);Params(0,_PARENT,12.0f);outParams(hMarginLayoutParams);middleLLinearLayout(this);entation(AL);outParams(hMarginLayoutParams);middleLinearLayout(this);entation(NTAL);outParams(vMarginLayoutParam这⾥确实没有什么难点可讲，⾃⼰参照 XML 布局⽂件和对应翻译出来的 Java 代码感受⼀下就能明⽩了。关闭按钮关闭按钮的难点是⾸先它是圆形按钮，不是⼀般的⽅形，其次上⾯还要画⼀个叉⼦，⽽这⼀切不允许⽤图⽚素材只能⽤纯代码来实现。我们还是先⽤ XML 来实现⼀遍然后再对应翻译成 Java 代码再实现⼀遍。先看看这个关闭按钮的 XML 布局⽂件。⼤体思路是先创建⼀个圆形蓝⾊的背景形状，然后在按钮中应⽤这个形状来做背景即可。背景形状的 XML ⽂件要放在 res/drawable/ ⽬录下⾯，我们给起个名字 res/drawable/close_button_ 内容如下：然后在 res/layout/ ⽬录下的布局⽂件中定义关闭按钮，并使⽤上述的背景形状。上⾯的按钮布局代码只是⼀部分，具体关闭按钮的位置摆放⽅法我们放在后⾯来讲。⽤ XML 实现关闭按钮时并没有很好的处理上⾯⽩⾊的叉⼦的画法，当时只是“简单粗暴”的使⽤了按钮⽂字来解决，⽤了⼀个⽩⾊的⼤写 X 来作为关闭按钮上的叉⼦图形。不过接下来我们看到使⽤纯 Java 代码来实现时这⾥得到了完美的解决。/* 关闭按钮 *//* this 是 Activity 实例 */int closeButtonSizePX = dp2px(24);Button closeButton = newButton(this);Params closeButtonLayoutParams = new按钮背景 */TGCPADCloseButtonBackground closeButtonBackground = new TGCPADCloseButtonBackground(this,closeButton);/* 圆形olor("#1B81C9"));kground(closeButtonBackground);Params(closeButtonSizePX,closeButtonSizePX);e(_PA*/pe();or(olor("#1B81C9"));close上⾯代码中关于关闭按钮位置布局的部分可以先忽略，我们接下来会详细讲。这⾥我们把关注点放在按钮背景的实现上。这⾥关闭按钮的背景我们⽤了⼀个⾃定义的类，我们先看看这个⾃定义类的源码：class TGCPADCloseButtonBackground extends GradientDrawable {private Context _context = null;private View _view =null;public TGCPADCloseButtonBackground(Context context, View view) {_context = (context);_view = view;}private intdp2px(float dp) {final float density = _ources().getDisplayMetrics().density;return (int) (dp * density +0.5f);}@Overridepublic void draw(Canvas canvas) {(canvas);Paint paint = new Paint();int width =_outParams().width;int height = _outParams().height;int margin =dp2px(8);or();le();okeWidth(dp2px(2));ne(margin,margin, width-margin, height-margin, paint);ne(margin, height-margin, width-margin, margin, paint);}}这个⾃定义类的代码并不多，它继承⾃ GradientDrawable 这个类，按照官⽅⽂档上的说明这个类是⽤来绘制按钮和背景的A Drawable with a color gradient for buttons, backgrounds, etc.所以这⾥的思路是让 TGCPADCloseButtonBackground 通过继承 GradientDrawable 来绘制⼀个蓝⾊的圆形按钮，然后再通过实现draw ⽅法在已经绘制好的蓝⾊圆形按钮上⾯绘制⼀个⽩⾊的叉⼦。图⽚视图 ImageView这⾥的难点在于绘制⼀个带圆⾓的外边框。不过有了上⾯绘制关闭按钮的思路，这⾥的实现⽅式也⼤同⼩异了。实现思路就是设置ImageView 的内边距，然后给 ImageView ⼀个⽩⾊带圆⾓形状的背景，这样看上去就有了⼀个带圆⾓的边框。这⾥就直接上 Java 代码了。/* ImageView *//* this 是 Activity 实例 */ImageView adImageView = new ImageView(this);ParamsadImageLayoutParams = Params(_PARENT,_PARENT);/* 这⾥设置外边距为了和关闭按钮形成位置对齐 */int adImageMargin = dp2px(CLOSE_BUTTON_SIZE /2);gins(adImageMargin,adImageMargin,adImageMargin,adImageMargin);/* 这⾥设置内边距来实现⽩⾊边框 */int adImagePadding =⽩⾊带圆⾓形状的背景 */GradientDrawable adImageBackground = newdp2px(4);ding(adImagePadding,adImagePadding,adImagePadding,adImagePadding);outParaGradientDrawable();pe(GLE);or();adIm关闭按钮和图⽚视图的位置布局通过整体布局我们已经得到了⼀块⼉居中并占屏幕 76% ⼤⼩的区域。这⾥我们要做的是把图⽚视图和关闭按钮放置到这个区域⾥并保证关闭按钮的位置始终在图⽚视图的右上⾓。这⾥我们的思路是在这块区域放置⼀个相对布局 RelativeLayout ，然后把关闭按钮放进这个相对布局中并让关闭按钮的位置保持在布局的右上⾓固定不动。图⽚视图要有⼀个外边距，外边距的宽度正好是关闭按钮⼤⼩的⼀半，这样就使得关闭按钮的中⼼点正好和图⽚视图的右上⾓点重合。⽼规矩先放出 XML 布局代码⾄于 Java 代码上⾯的章节已经都贴过了，这⾥就不再重复粘贴了，⼤家翻看上⾯的代码来感受⼀下吧。全屏和背景半透明这个只有三⾏代码，直接放出了@Overrideprotected void onCreate(Bundle savedInstanceState){te(savedInstanceState);getWindow().setFlags(Params. FLAG_FULLSCREEN,_FULLSCREEN);requestWindowFeature(E_NO_TITLE);getWindow().setBackgroundDrawable(newColorDrawable(olor("#75000000")));}