「App:Library:LVGL:docs:Overview:Scroll」の版間の差分
25行目: | 25行目: | ||
オブジェクトは、一筆書きで水平または垂直にスクロールすることができ、斜め方向のスクロールはできません。 | オブジェクトは、一筆書きで水平または垂直にスクロールすることができ、斜め方向のスクロールはできません。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
52行目: | 52行目: | ||
<code style="color: #bb0000;">lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_...)</code> は、オブジェクトのスクロールバーモードを設定します。 | <code style="color: #bb0000;">lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_...)</code> は、オブジェクトのスクロールバーモードを設定します。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
128行目: | 128行目: | ||
<code style="color: #bb0000;">pad_left/right/top/bottom</code>は、スクロールバーの周囲の間隔を設定し、<code style="color: #bb0000;">width</code> は、スクロールバーの幅を設定します。 | <code style="color: #bb0000;">pad_left/right/top/bottom</code>は、スクロールバーの周囲の間隔を設定し、<code style="color: #bb0000;">width</code> は、スクロールバーの幅を設定します。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
=== Events === | === Events === | ||
147行目: | 147行目: | ||
*<code style="color: #bb0000;">LV_EVENT_SCROLL</code> スクロールが発生した。位置が変わるごとにトリガーされます。スクロールイベント | *<code style="color: #bb0000;">LV_EVENT_SCROLL</code> スクロールが発生した。位置が変わるごとにトリガーされます。スクロールイベント | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
159行目: | 159行目: | ||
| | | | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
171行目: | 171行目: | ||
|また、「通常の」スクロールを管理する以外にも、多くの興味深く便利な機能が追加されています。 | |また、「通常の」スクロールを管理する以外にも、多くの興味深く便利な機能が追加されています。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
223行目: | 223行目: | ||
OR-ed値も可能。例: <code style="color: #bb0000;">LV_DIR_TOP | LV_DIR_LEFT</code>. | OR-ed値も可能。例: <code style="color: #bb0000;">LV_DIR_TOP | LV_DIR_LEFT</code>. | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
259行目: | 259行目: | ||
チェイニングを無効にすると、そのオブジェクトで伝播が止まり、親はスクロールされなくなります。 | チェイニングを無効にすると、そのオブジェクトで伝播が止まり、親はスクロールされなくなります。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
282行目: | 282行目: | ||
スクロールの勢いは、<code style="color: #bb0000;">LV_OBJ_FLAG_SCROLL_MOMENTUM</code>フラグで有効/無効を設定することができます。 | スクロールの勢いは、<code style="color: #bb0000;">LV_OBJ_FLAG_SCROLL_MOMENTUM</code>フラグで有効/無効を設定することができます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
318行目: | 318行目: | ||
オブジェクトがリリースされると、その中でスクロールされたコンテンツは有効な位置にアニメーションで戻されます。 | オブジェクトがリリースされると、その中でスクロールされたコンテンツは有効な位置にアニメーションで戻されます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
362行目: | 362行目: | ||
# LVGLはアニメーションでスナップポイントまでスクロールする | # LVGLはアニメーションでスナップポイントまでスクロールする | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
383行目: | 383行目: | ||
この機能は、 <code style="color: #bb0000;">LV_OBJ_FLAG_SCROLL_ONE</code>フラグで有効にすることができます。 | この機能は、 <code style="color: #bb0000;">LV_OBJ_FLAG_SCROLL_ONE</code>フラグで有効にすることができます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
419行目: | 419行目: | ||
オブジェクトは、タブビューの別のページにある場合でも、視界に入るようにスクロールされます。 | オブジェクトは、タブビューの別のページにある場合でも、視界に入るようにスクロールされます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
441行目: | 441行目: | ||
*<code style="color: #bb0000;">lv_obj_scroll_to_y(obj, y, LV_ANIM_ON/OFF)</code> :与えられた座標を上側に持ってくるようにスクロールさせます. | *<code style="color: #bb0000;">lv_obj_scroll_to_y(obj, y, LV_ANIM_ON/OFF)</code> :与えられた座標を上側に持ってくるようにスクロールさせます. | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
527行目: | 527行目: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Scroll|戻る : Previous]] |
568行目: | 568行目: | ||
− | + | [[App:Library:LVGL#Overview|戻る : Previous]] |
2022年7月2日 (土) 10:14時点における版
https://docs.lvgl.io/8.2/overview/scroll.html
Scroll
Overview
英文 | 自動翻訳 |
---|---|
In LVGL scrolling works very intuitively: if an object is outside its parent content area (the size without padding), the parent becomes scrollable and scrollbar(s) will appear. That's it.
The object can either be scrolled horizontally or vertically in one stroke; diagonal scrolling is not possible. |
LVGLのスクロールは、非常に直感的に動作します。オブジェクトが親のコンテンツ領域(パディングなしのサイズ)の外に出た場合、親はスクロール可能になり、スクロールバー(複数可)が表示されるのです。
これだけです。
オブジェクトは、一筆書きで水平または垂直にスクロールすることができ、斜め方向のスクロールはできません。 |
Scrollbar
Mode
英文 | 自動翻訳 |
---|---|
Scrollbars are displayed according to a configured
|
スクロールバーは、設定されたmode に従って表示されます。以下のmode が存在する。
|
Styling
英文 | 自動翻訳 |
---|---|
The scrollbars have their own dedicated part, called For example a scrollbar can turn to red like this: static lv_style_t style_red;
lv_style_init(&style_red);
lv_style_set_bg_color(&style_red, lv_color_red());
...
lv_obj_add_style(obj, &style_red, LV_PART_SCROLLBAR);
An object goes to the
This code makes the scrollbar blue when the object is scrolled: static lv_style_t style_blue;
lv_style_init(&style_blue);
lv_style_set_bg_color(&style_blue, lv_color_blue());
...
lv_obj_add_style(obj, &style_blue, LV_STATE_SCROLLED | LV_PART_SCROLLBAR);
If the base direction of the
|
スクロールバーは、LV_PART_SCROLLBAR という専用のパーツを持っています。
例えば、スクロールバーはこのように赤色に変化します。 static lv_style_t style_red;
lv_style_init(&style_red);
lv_style_set_bg_color(&style_red, lv_color_red());
...
lv_obj_add_style(obj, &style_red, LV_PART_SCROLLBAR);
オブジェクトは、スクロールされている間、
このコードでは、オブジェクトがスクロールされると、スクロールバーが青くなります。 static lv_style_t style_blue;
lv_style_init(&style_blue);
lv_style_set_bg_color(&style_blue, lv_color_blue());
...
lv_obj_add_style(obj, &style_blue, LV_STATE_SCROLLED | LV_PART_SCROLLBAR);
|
Events
英文 | 自動翻訳 |
---|---|
The following events are related to scrolling:
|
スクロールに関連するイベントとして、以下のものがあります。
|
Basic example
英文 | 自動翻訳 |
---|---|
TODO |
Features of scrolling
英文 | 自動翻訳 |
---|---|
Besides, managing "normal" scrolling there are many interesting and useful additional features. |
また、「通常の」スクロールを管理する以外にも、多くの興味深く便利な機能が追加されています。 |
Scrollable
英文 | 自動翻訳 |
---|---|
It's possible to make an object non-scrollable with
|
lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE) .でオブジェクトをスクロール不可能にできます。
|
Scroll chain
英文 | 自動翻訳 |
---|---|
If an object can't be scrolled further (e.g. its content has reached the bottom-most position) additional scrolling is propagated to its parent.
|
オブジェクトがこれ以上スクロールできない場合 (たとえば、そのコンテンツが最下部に達した場合)、追加のスクロールがその親に伝搬されます。
|
Scroll momentum
英文 | 自動翻訳 |
---|---|
When the user scrolls an object and releases it, LVGL can emulate inertial momentum for the scrolling.
The scroll momentum can be enabled/disabled with the |
ユーザーがオブジェクトをスクロールしてそれを放したとき、LVGLはスクロールの慣性モーメンタムをエミュレートすることができます。
|
Elastic scroll
英文 | 自動翻訳 |
---|---|
Normally an object can't be scrolled past the extremeties of its content.
|
通常、オブジェクトはそのコンテンツの極限を越えてスクロールすることはできません。
|
Snapping
英文 | 自動翻訳 |
---|---|
The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snappable individually with the An object can align snapped children in four ways:
Snap alignment is set with Under the hood the following happens:
|
オブジェクトの子オブジェクトは、スクロール終了時に特定のルールに従ってスナップさせることができる。子オブジェクトは LV_OBJ_FLAG_SNAPPABLE フラグで個別にスナップ可能にすることができます。
オブジェクトは、スナップされた子オブジェクトを4つの方法で整列させることができます。
スナップアライメントは 内部では、次のようになります。
|
Scroll one
英文 | 自動翻訳 |
---|---|
The "scroll one" feature tells LVGL to allow scrolling only one snappable child at a time. This requires making the children snappable and setting a scroll snap alignment different from This feature can be enabled by the |
"scroll one"機能は、LVGLに、一度に1つのスナップ可能な子だけをスクロールすることを許可するように指示します。
これには、子プロセスをスナップ可能にし、
|
Scroll on focus
英文 | 自動翻訳 |
---|---|
Imagine that there a lot of objects in a group that are on a scrollable object.
|
スクロール可能なオブジェクト上にあるグループ内の多くのオブジェクトを想像してください。
|
Scroll manually
英文 | 自動翻訳 |
---|---|
The following API functions allow manual scrolling of objects:
|
以下の API 関数により、オブジェクトを手動でスクロールさせることができる。
|
Self size
英文 | 自動翻訳 |
---|---|
Self size is a property of an object. Normally, the user shouldn't use this parameter but if a custom widget is created it might be useful.
Let's say it has 10 rows each with 50 px height. So the total height of the content is 500 px. In other words the "self height" is 500 px.
This means not only the children can make an object scrollable but a larger self size will too.
if(event_code == LV_EVENT_GET_SELF_SIZE) {
lv_point_t * p = lv_event_get_param(e);
//If x or y < 0 then it doesn't neesd to be calculated now
if(p->x >= 0) {
p->x = 200; //Set or calculate the self width
}
if(p->y >= 0) {
p->y = 50; //Set or calculate the self height
}
}
|
Self size は、オブジェクトのプロパティです。通常、ユーザーはこのパラメータを使うべきではありませんが、カスタムウィジェットが作成された場合、役に立つかもしれません。
例えば、高さ50pxの10行のテーブルがあるとします。 つまり、コンテンツの高さは合計で500pxとなる。 言い換えれば、「自分の高さ」は500pxです。
つまり、子オブジェクトだけでなく、自己サイズが大きければ、オブジェクトをスクロール可能にすることができるのです。
if(event_code == LV_EVENT_GET_SELF_SIZE) {
lv_point_t * p = lv_event_get_param(e);
//If x or y < 0 then it doesn't neesd to be calculated now
if(p->x >= 0) {
p->x = 200; //Set or calculate the self width
}
if(p->y >= 0) {
p->y = 50; //Set or calculate the self height
}
}
|
Examples
英文 | 自動翻訳 |
---|---|
Nested scrolling |
|
Snapping |
|
Floating button |
|
Styling the scrollbars |
|
Right to left scrolling |
|
Translate on scroll |