Table of Contents
回复内容:
Home Web Front-end H5 Tutorial 请问这样的界面是如何实现的?

请问这样的界面是如何实现的?

Jun 07, 2016 am 08:41 AM

回复内容:

今天下午各种Google之后终于实现了这个界面的各种效果。最终的界面这样的,基本实现了问题里面的所有元素。
请问这样的界面是如何实现的?
代码在mutexliu/ZhihuAnswer · GitHub
画图的过程碰到的问题有:
1.画圆角。
<span class="n">Path</span> <span class="n">path</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Path</span><span class="o">();</span>
<span class="n">path</span><span class="o">.</span><span class="na">moveTo</span><span class="o">(</span><span class="n">left</span><span class="o">,</span> <span class="n">top</span><span class="o">);</span>
<span class="n">path</span><span class="o">.</span><span class="na">lineTo</span><span class="o">(</span><span class="n">right</span><span class="o">-</span><span class="n">radius</span><span class="o">,</span> <span class="n">top</span><span class="o">);</span>
<span class="n">path</span><span class="o">.</span><span class="na">quadTo</span><span class="o">(</span><span class="n">right</span><span class="o">,</span><span class="n">top</span><span class="o">,</span><span class="n">right</span><span class="o">,</span> <span class="n">top</span><span class="o">+</span><span class="n">radius</span><span class="o">);</span>
Copy after login
我写过一个控件lzyzsd/CircleProgress · GitHub请问这样的界面是如何实现的? 我怎么觉得这种界面的难点在美工,配色等方面。一般纯程序员搞出来的总有股子山寨气息,就是配色和美工搞不好。。。 大半夜更新。。。( •̀∀•́ )

///12.25 23点

请问这样的界面是如何实现的?

and
请问这样的界面是如何实现的?



闲着没事忽然发现,QQ是酱紫的。。。




这种自定义UI组件算是从事Android开发必备的技能之一吧。多写多练很快就能掌握这里面的技巧,掌握了技巧之后遇到具体需求和设计的时候,就会很快做出成果。
努力做到举一反三,而不是拘泥于一两个特定的案例。


请问这样的界面是如何实现的?
请问这样的界面是如何实现的?
。。

具体实现楼上已经讲的很清楚了,还有源码

不过一定要动手实现一遍 我知道的只有自定义View = =
(对于程序猿来说。。。ui的实现就是多写代码) 正好最近在做类似的实现。
Canvas里面有专门画圆弧的函数:
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">drawArc</span> <span class="o">(</span><span class="n">RectF</span> <span class="n">oval</span><span class="o">,</span> <span class="kt">float</span> <span class="n">startAngle</span><span class="o">,</span> <span class="kt">float</span> <span class="n">sweepAngle</span><span class="o">,</span> <span class="kt">boolean</span> <span class="n">useCenter</span><span class="o">,</span> <span class="n">Paint</span> <span class="n">paint</span><span class="o">)</span>
Copy after login
circleprogress
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Clair Obscur: Expedition 33 - How To Get Perfect Chroma Catalysts
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1677
14
PHP Tutorial
1278
29
C# Tutorial
1257
24
H5 Code: Best Practices for Web Developers H5 Code: Best Practices for Web Developers Apr 16, 2025 am 12:14 AM

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

H5: How It Enhances User Experience on the Web H5: How It Enhances User Experience on the Web Apr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

Understanding H5 Code: The Fundamentals of HTML5 Understanding H5 Code: The Fundamentals of HTML5 Apr 17, 2025 am 12:08 AM

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

Deconstructing H5 Code: Tags, Elements, and Attributes Deconstructing H5 Code: Tags, Elements, and Attributes Apr 18, 2025 am 12:06 AM

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

The Building Blocks of H5 Code: Key Elements and Their Purpose The Building Blocks of H5 Code: Key Elements and Their Purpose Apr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

The Connection Between H5 and HTML5: Similarities and Differences The Connection Between H5 and HTML5: Similarities and Differences Apr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

HTML5 and H5: Understanding the Common Usage HTML5 and H5: Understanding the Common Usage Apr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

H5: Key Improvements in HTML5 H5: Key Improvements in HTML5 Apr 28, 2025 am 12:26 AM

HTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.

See all articles